lapikit 0.7.3 → 0.7.4

package/dist/components/modal/modal.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import { get } from 'svelte/store';
-	import { makeComponentProps } from '../../html-mapped';
-	import { useClassName, useElevation, useStyles } from '../../utils';
+	import { splitAriaAttrs, useComponentAttrs, useElevation } from '../../utils';
 	import { modalOpen, modalStack, popModal, pushModal, setOpenModal } from './modal.js';
 	import type { ModalProps } from './modal.types.js';
 
-	const modalId = crypto.randomUUID();
+	const modalId = $props.id();
 	let wasPushed = $state(false);
 
 	let {
 		ref = $bindable(),
 		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		open = $bindable(false),
@@ -23,43 +22,29 @@
 		position = 'center',
 		rounded = 'md',
 		density = 'default',
-		classContent = '',
+		classContent,
 		color,
-		background,
 		closeWithEsc = true,
 		space,
 		elevation = '2',
 		...rest
 	}: ModalProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
+	let attrs = $derived(
+		useComponentAttrs(
+			'kit-modal',
+			{
+				className,
+				sClass,
+				styleAttr,
+				sStyle: space ? { '--kit-modal-space': space, ...sStyle } : sStyle,
+				color
+			},
+			rest
+		)
 	);
-
 	let elevationState = $derived(useElevation(elevation));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-modal',
-			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 (open && !wasPushed) {
@@ -109,39 +94,29 @@
 	function handleClose() {
 		if (!persistent) open = false;
 	}
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-modal-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-modal-bg:${background && `var(--kit-color-${background})`}` : '',
-			space ? `--kit-modal-space:${space}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
 </script>
 
 {#if open}
 	<div
 		bind:this={ref}
-		class={componentClass}
-		style={resolvedStyle}
+		class={attrs.class}
+		style={attrs.style}
 		role="dialog"
 		aria-modal={!contain}
+		{...split.aria}
 		data-contain={contain}
+		data-density={density}
+		data-rounded={rounded}
 	>
 		{#if contain}
 			<div class="kit-modal__overlay" role="presentation" onclick={handleClose}></div>
 		{/if}
 
 		<div
-			{...restProps}
-			class={['kit-modal__content', contentClass]}
+			{...split.others}
+			class={['kit-modal__content', classContent]}
 			data-size={size}
 			data-position={position}
-			data-density={density}
-			data-rounded={rounded}
 			data-elevation={elevationState.base}
 			data-elevation-hover={elevationState.hover}
 			data-elevation-active={elevationState.active}
@@ -152,175 +127,217 @@
 	</div>
 {/if}
 
-<style>
-	.kit-modal {
-		--kit-modal-max: min(32rem, calc(100vw - 2rem));
-
-		position: fixed;
-		inset: 0;
-		z-index: 9100;
-		pointer-events: none;
-	}
-
-	.kit-modal[data-contain='true'] {
-		position: absolute;
-	}
-
-	.kit-modal__overlay {
-		position: absolute;
-		inset: 0;
-		background: color-mix(in oklab, var(--kit-color-shadow), transparent 70%);
-		backdrop-filter: blur(2px);
-		pointer-events: auto;
-	}
-
-	.kit-modal__content {
-		--kit-modal-bg: var(--kit-color-surface-1);
-		--kit-modal-fg: var(--kit-color-text);
-
-		position: fixed;
-		left: var(--kit-modal-left);
-		right: var(--kit-modal-right);
-		top: var(--kit-modal-top);
-		bottom: var(--kit-modal-bottom);
-		translate: var(--kit-modal-translate-x) var(--kit-modal-translate-y);
-		box-sizing: border-box;
-		width: min(calc(100vw - 2rem), var(--kit-modal-max));
-		max-height: calc(100dvh - 2rem);
-		overflow: auto;
-		padding: calc(var(--kit-modal-p) + var(--kit-modal-density-offset) / 2);
-		border: 0;
-		border-radius: var(--kit-modal-radius);
-		background: var(--kit-modal-bg);
-		color: var(--kit-modal-fg);
-		pointer-events: auto;
-	}
-
-	.kit-modal[data-contain='true'] .kit-modal__content {
-		position: absolute;
-	}
-
-	/**
-	* size
-	* @link nothing...
-	*/
-	.kit-modal__content[data-size='xs'] {
-		--kit-modal-max: 20rem;
-		--kit-modal-p: 12px;
-	}
-
-	.kit-modal__content[data-size='sm'] {
-		--kit-modal-max: 24rem;
-		--kit-modal-p: 14px;
-	}
-
-	.kit-modal__content[data-size='md'] {
-		--kit-modal-max: 32rem;
-		--kit-modal-p: 16px;
-	}
-
-	.kit-modal__content[data-size='lg'] {
-		--kit-modal-max: 42rem;
-		--kit-modal-p: 20px;
-	}
-
-	.kit-modal__content[data-size='xl'] {
-		--kit-modal-max: 56rem;
-		--kit-modal-p: 24px;
-	}
-
-	.kit-modal__content[data-size='full'] {
-		top: auto;
-		bottom: 0;
-		left: 0;
-		translate: 0 0;
-		width: 100%;
-		max-width: 100%;
-		max-height: 100dvh;
-		height: min(100dvh, 100%);
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-
-	/** 
-	 * density
-	 * @link no links
-	 */
-	.kit-modal__content[data-density='compact'] {
-		--kit-modal-density-offset: var(--kit-space-compact);
-	}
-	.kit-modal__content[data-density='default'] {
-		--kit-modal-density-offset: var(--kit-space-default);
-	}
-	.kit-modal__content[data-density='comfortable'] {
-		--kit-modal-density-offset: var(--kit-space-comfortable);
-	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-modal__content[data-rounded='0'] {
-		--kit-modal-radius: var(--kit-shape-none);
-	}
-	.kit-modal__content[data-rounded='xs'] {
-		--kit-modal-radius: var(--kit-shape-xs);
-	}
-	.kit-modal__content[data-rounded='sm'] {
-		--kit-modal-radius: var(--kit-shape-sm);
-	}
-	.kit-modal__content[data-rounded='md'] {
-		--kit-modal-radius: var(--kit-shape-md);
-	}
-	.kit-modal__content[data-rounded='lg'] {
-		--kit-modal-radius: var(--kit-shape-lg);
-	}
-	.kit-modal__content[data-rounded='xl'] {
-		--kit-modal-radius: var(--kit-shape-xl);
-	}
-
-	/**
-	* position
-	* @link nothing...
-	*/
-
-	.kit-modal__content[data-position='top'],
-	.kit-modal__content[data-position='center'],
-	.kit-modal__content[data-position='bottom'] {
-		--kit-modal-translate-x: -50%;
-		--kit-modal-left: 50%;
-	}
-	.kit-modal__content[data-position='top'],
-	.kit-modal__content[data-position='top-left'],
-	.kit-modal__content[data-position='top-right'] {
-		--kit-modal-top: var(--kit-modal-space, 1rem);
-		--kit-modal-bottom: auto;
-		--kit-modal-translate-y: 0;
-	}
-	.kit-modal__content[data-position='center'],
-	.kit-modal__content[data-position='center-left'],
-	.kit-modal__content[data-position='center-right'] {
-		--kit-modal-top: 50%;
-		--kit-modal-bottom: auto;
-		--kit-modal-translate-y: -50%;
-	}
-
-	.kit-modal__content[data-position='bottom'],
-	.kit-modal__content[data-position='bottom-left'],
-	.kit-modal__content[data-position='bottom-right'] {
-		--kit-modal-top: auto;
-		--kit-modal-bottom: var(--kit-modal-space, 1rem);
-		--kit-modal-translate-y: 0;
-	}
-	.kit-modal__content[data-position='top-left'],
-	.kit-modal__content[data-position='center-left'],
-	.kit-modal__content[data-position='bottom-left'] {
-		--kit-modal-left: var(--kit-modal-space, 1rem);
-		--kit-modal-translate-x: 0;
-	}
-	.kit-modal__content[data-position='top-right'],
-	.kit-modal__content[data-position='center-right'],
-	.kit-modal__content[data-position='bottom-right'] {
-		--kit-modal-right: var(--kit-modal-space, 1rem);
-	}
-</style>
+<style>:where(.kit-modal) {
+  --kit-modal-color: initial;
+  --kit-modal-on-color: initial;
+  --kit-modal-active-fg: initial;
+  --kit-modal-active-shade: initial;
+  --kit-modal-hover-fg: initial;
+  --kit-modal-pressed-fg: initial;
+  --kit-modal-bg: var(--kit-modal-color, var(--kit-color-surface-1));
+  --kit-modal-fg: var(--kit-modal-on-color, var(--kit-modal-contrast, var(--kit-color-text)));
+  --kit-modal-ink: var(--kit-modal-color, var(--kit-color-text));
+  --kit-modal-hover: color-mix(in oklab, var(--kit-modal-bg), var(--kit-modal-fg) 8%);
+  --kit-modal-pressed: color-mix(in oklab, var(--kit-modal-bg), var(--kit-modal-fg) 14%);
+  --kit-modal-soft: color-mix(in oklab, var(--kit-modal-bg) 16%, transparent);
+  --kit-modal-border: color-mix(in oklab, var(--kit-modal-bg), var(--kit-modal-fg) 20%);
+  --kit-modal-active: color-mix(
+  	in oklab,
+  	var(--kit-modal-color),
+  	var(--kit-modal-fg) var(--kit-modal-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-modal) {
+    --kit-modal-contrast: color(from var(--kit-modal-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-modal) {
+  --kit-modal-max: 32rem;
+  --kit-modal-p: 1.125rem;
+  --kit-modal-space: 1rem;
+}
+
+:where(.kit-modal__content) {
+  --kit-modal-top: auto;
+  --kit-modal-right: auto;
+  --kit-modal-bottom: auto;
+  --kit-modal-left: auto;
+  --kit-modal-translate-x: 0;
+  --kit-modal-translate-y: 0;
+}
+
+.kit-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 9100;
+  pointer-events: none;
+}
+.kit-modal[data-contain=true] {
+  position: absolute;
+}
+.kit-modal[data-contain=true] .kit-modal__content {
+  position: absolute;
+}
+.kit-modal__overlay {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in oklab, var(--kit-color-shadow), transparent 70%);
+  backdrop-filter: blur(2px);
+  pointer-events: auto;
+}
+.kit-modal__content {
+  position: fixed;
+  top: var(--kit-modal-top);
+  right: var(--kit-modal-right);
+  bottom: var(--kit-modal-bottom);
+  left: var(--kit-modal-left);
+  box-sizing: border-box;
+  width: min(100vw - 2rem, var(--kit-modal-max));
+  max-height: calc(100dvh - 2rem);
+  padding: calc(var(--kit-modal-p) + var(--kit-modal-density-offset) / 2);
+  overflow: auto;
+  border: 0;
+  border-radius: var(--kit-modal-radius);
+  background-color: var(--kit-modal-bg);
+  color: var(--kit-modal-fg);
+  pointer-events: auto;
+  translate: var(--kit-modal-translate-x) var(--kit-modal-translate-y);
+}
+.kit-modal__content[data-size=full] {
+  top: auto;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  max-width: 100%;
+  height: min(100dvh, 100%);
+  max-height: 100dvh;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  translate: 0 0;
+}
+
+/**
+ * size
+ * @link https://lapikit.dev/docs/components/modal#size
+ */
+:where(.kit-modal__content[data-size=xs]) {
+  --kit-modal-max: 20rem;
+  --kit-modal-p: 0.875rem;
+}
+
+:where(.kit-modal__content[data-size=sm]) {
+  --kit-modal-max: 24rem;
+  --kit-modal-p: 1rem;
+}
+
+:where(.kit-modal__content[data-size=md]) {
+  --kit-modal-max: 32rem;
+  --kit-modal-p: 1.125rem;
+}
+
+:where(.kit-modal__content[data-size=lg]) {
+  --kit-modal-max: 42rem;
+  --kit-modal-p: 1.375rem;
+}
+
+:where(.kit-modal__content[data-size=xl]) {
+  --kit-modal-max: 56rem;
+  --kit-modal-p: 1.625rem;
+}
+
+/**
+ * position
+ * @link https://lapikit.dev/docs/components/modal#position
+ */
+:where(.kit-modal__content:is([data-position=top], [data-position=center], [data-position=bottom])) {
+  --kit-modal-left: 50%;
+  --kit-modal-translate-x: -50%;
+}
+
+:where(.kit-modal__content:is([data-position=top],
+[data-position=top-left],
+[data-position=top-right])) {
+  --kit-modal-top: var(--kit-modal-space);
+}
+
+:where(.kit-modal__content:is([data-position=center],
+[data-position=center-left],
+[data-position=center-right])) {
+  --kit-modal-top: 50%;
+  --kit-modal-translate-y: -50%;
+}
+
+:where(.kit-modal__content:is([data-position=bottom],
+[data-position=bottom-left],
+[data-position=bottom-right])) {
+  --kit-modal-bottom: var(--kit-modal-space);
+}
+
+:where(.kit-modal__content:is([data-position=top-left],
+[data-position=center-left],
+[data-position=bottom-left])) {
+  --kit-modal-left: var(--kit-modal-space);
+}
+
+:where(.kit-modal__content:is([data-position=top-right],
+[data-position=center-right],
+[data-position=bottom-right])) {
+  --kit-modal-right: var(--kit-modal-space);
+}
+
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-modal[data-rounded="0"]) {
+  --kit-modal-radius: var(--kit-shape-none);
+}
+
+:where(.kit-modal[data-rounded=xs]) {
+  --kit-modal-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-modal[data-rounded=sm]) {
+  --kit-modal-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-modal[data-rounded=md]) {
+  --kit-modal-radius: var(--kit-shape-md);
+}
+
+:where(.kit-modal[data-rounded=lg]) {
+  --kit-modal-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-modal[data-rounded=xl]) {
+  --kit-modal-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-modal[data-rounded=full]) {
+  --kit-modal-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/modal#density
+ */
+:where(.kit-modal[data-density=dense]) {
+  --kit-modal-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-modal[data-density=compact]) {
+  --kit-modal-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-modal[data-density=default]) {
+  --kit-modal-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-modal[data-density=comfortable]) {
+  --kit-modal-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-modal[data-density=spacious]) {
+  --kit-modal-density-offset: var(--kit-density-spacious);
+}</style>

package/dist/components/modal/modal.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 ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 type ModalPosition = 'top' | 'center' | 'bottom' | 'top-left' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-right';
 export interface ModalProps extends Component {
@@ -8,11 +9,10 @@ export interface ModalProps extends Component {
     size?: ModalSize;
     persistent?: boolean;
     position?: ModalPosition;
-    rounded?: RoundedType;
-    density?: DensityType;
-    classContent?: string | string[] | undefined;
-    color?: string;
-    background?: string;
+    rounded?: RoundedType | 'full';
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
+    classContent?: ClassValue;
+    color?: ColorProps;
     closeWithEsc?: boolean;
     space?: string;
     elevation?: ElevationProps;