lapikit 0.7.2 → 0.7.4

package/dist/components/aspect-ratio/aspect-ratio.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { useClassName, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
+	import { useComponentAttrs } from '../../utils';
 	import type { AspectRatioProps, AspectRatioValue } from './aspect-ratio.types.js';
 
 	const FALLBACK_RATIO = 16 / 9;
@@ -36,8 +35,8 @@
 		ref = $bindable(),
 		is = 'div',
 		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		ratio = undefined,
@@ -47,75 +46,56 @@
 		...rest
 	}: AspectRatioProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-aspect-ratio',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
 	let resolvedRatio = $derived(resolveRatio(ratio ?? aspectRatio));
+	let attrs = $derived(
+		useComponentAttrs(
+			'kit-aspect-ratio',
+			{
+				className,
+				sClass,
+				styleAttr,
+				sStyle: { '--kit-aspect-ratio': String(resolvedRatio), '--kit-aspect-fit': fit, ...sStyle }
+			},
+			rest
+		)
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
-	class={componentClass}
-	style={componentStyle}
+	class={attrs.class}
+	style={attrs.style}
 	data-inline={inline}
-	style:--kit-aspect-ratio={resolvedRatio}
-	style:--kit-aspect-fit={fit}
-	{...restProps}
+	{...attrs.rest}
 >
 	<div class="kit-aspect-ratio__inner">
 		{@render children?.()}
 	</div>
 </svelte:element>
 
-<style>
-	.kit-aspect-ratio {
-		display: block;
-		position: relative;
-		width: 100%;
-		max-width: 100%;
-		overflow: hidden;
-		aspect-ratio: var(--kit-aspect-ratio, 1.7777777778);
-	}
-
-	.kit-aspect-ratio[data-inline='true'] {
-		display: inline-block;
-		width: auto;
-	}
-
-	.kit-aspect-ratio__inner {
-		position: absolute;
-		inset: 0;
-		width: 100%;
-		height: 100%;
-	}
-
-	.kit-aspect-ratio :global(img),
-	.kit-aspect-ratio :global(video),
-	.kit-aspect-ratio :global(iframe),
-	.kit-aspect-ratio :global(canvas),
-	.kit-aspect-ratio :global(svg) {
-		display: block;
-		width: 100%;
-		height: 100%;
-		object-fit: var(--kit-aspect-fit, cover);
-	}
-</style>
+<style>.kit-aspect-ratio {
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  aspect-ratio: var(--kit-aspect-ratio, 1.7777777778);
+}
+.kit-aspect-ratio[data-inline=true] {
+  display: inline-block;
+  width: auto;
+}
+.kit-aspect-ratio__inner {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.kit-aspect-ratio__inner > :global(:is(img, video, iframe, canvas, svg, picture)),
+.kit-aspect-ratio__inner > :global(picture > img) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--kit-aspect-fit, cover);
+}</style>

package/dist/components/avatar/avatar.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import { useClassName, useElevation, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
+	import { useComponentAttrs, useElevation } from '../../utils';
 	import type { AvatarProps } from './avatar.types.js';
 
 	let {
 		ref = $bindable(),
 		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		label = undefined,
@@ -16,180 +15,189 @@
 		rounded = 'full',
 		elevation,
 		color,
-		background,
 		...rest
 	}: AvatarProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
+	let attrs = $derived(
+		useComponentAttrs('kit-avatar', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-avatar',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
 	let elevationState = $derived(useElevation(elevation));
-	let contentType = $derived(label && label.trim().length > 0 ? 'label' : children);
 	let displayLabel = $derived(label?.trim() ?? '');
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-avatar-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-avatar-bg:${background && `var(--kit-color-${background})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
 </script>
 
-<svelte:element
-	this={'div'}
+<div
 	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
-	data-type={contentType}
+	class={attrs.class}
+	style={attrs.style}
+	data-type={displayLabel ? 'label' : 'content'}
 	data-size={size}
 	data-density={density}
 	data-rounded={rounded}
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
 	data-elevation-active={elevationState.active}
-	{...restProps}
+	{...attrs.rest}
 >
-	{#if contentType === 'label'}
+	{#if displayLabel}
 		<span class="kit-avatar__label">{displayLabel}</span>
 	{:else}
 		{@render children?.()}
 	{/if}
-</svelte:element>
-
-<style>
-	.kit-avatar {
-		--kit-avatar-bg: var(--kit-color-surface-3);
-		--kit-avatar-fg: var(--kit-color-text);
-
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: calc(var(--kit-avatar-h) + var(--kit-avatar-density-offset) / 2);
-		height: calc(var(--kit-avatar-h) + var(--kit-avatar-density-offset) / 2);
-		overflow: hidden;
-		background: var(--kit-avatar-bg);
-		color: var(--kit-avatar-fg);
-		border-radius: var(--kit-avatar-radius);
-		border: 0;
-		font-weight: 600;
-		line-height: 1;
-		user-select: none;
-		transition:
-			background 140ms ease,
-			color 140ms ease,
-			box-shadow 140ms ease,
-			translate 140ms ease;
-	}
-
-	.kit-avatar[data-type='label'] {
-		font-size: var(--kit-avatar-font-size);
-		text-transform: uppercase;
-	}
-
-	.kit-avatar__label {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		max-width: 100%;
-		padding-inline: 0.25rem;
-	}
-
-	.kit-avatar :global(img) {
-		display: block;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-avatar[data-rounded='0'] {
-		--kit-avatar-radius: var(--kit-shape-none);
-	}
-	.kit-avatar[data-rounded='xs'] {
-		--kit-avatar-radius: var(--kit-shape-xs);
-	}
-	.kit-avatar[data-rounded='sm'] {
-		--kit-avatar-radius: var(--kit-shape-sm);
-	}
-	.kit-avatar[data-rounded='md'] {
-		--kit-avatar-radius: var(--kit-shape-md);
-	}
-	.kit-avatar[data-rounded='lg'] {
-		--kit-avatar-radius: var(--kit-shape-lg);
-	}
-	.kit-avatar[data-rounded='xl'] {
-		--kit-avatar-radius: var(--kit-shape-xl);
-	}
-
-	.kit-avatar[data-rounded='full'] {
-		--kit-avatar-radius: var(--kit-shape-full);
-	}
-
-	/** 
-	 * density
-	 * @link ...
-	 */
-	.kit-avatar[data-density='compact'] {
-		--kit-avatar-density-offset: var(--kit-density-compact);
-	}
-	.kit-avatar[data-density='default'] {
-		--kit-avatar-density-offset: var(--kit-density-default);
-	}
-	.kit-avatar[data-density='comfortable'] {
-		--kit-avatar-density-offset: var(--kit-density-comfortable);
-	}
-
-	/**
-	* size
-	* @link nothing...
-	*/
-	.kit-avatar[data-size='xs'] {
-		--kit-avatar-h: 32px;
-		--kit-avatar-gap: var(--kit-space-compact);
-		--kit-avatar-font: var(--kit-font-xs);
-	}
-	.kit-avatar[data-size='sm'] {
-		--kit-avatar-h: 40px;
-		--kit-avatar-gap: var(--kit-space-default);
-		--kit-avatar-font: var(--kit-font-sm);
-	}
-	.kit-avatar[data-size='md'] {
-		--kit-avatar-h: 48px;
-		--kit-avatar-gap: var(--kit-space-default);
-		--kit-avatar-font: var(--kit-font-md);
-	}
-	.kit-avatar[data-size='lg'] {
-		--kit-avatar-h: 56px;
-		--kit-avatar-gap: var(--kit-space-default);
-		--kit-avatar-font: var(--kit-font-lg);
-	}
-	.kit-avatar[data-size='xl'] {
-		--kit-avatar-h: 64px;
-		--kit-avatar-gap: var(--kit-space-comfortable);
-		--kit-avatar-font: var(--kit-font-xl);
-	}
-</style>
+</div>
+
+<style>:where(.kit-avatar) {
+  --kit-avatar-color: initial;
+  --kit-avatar-on-color: initial;
+  --kit-avatar-active-fg: initial;
+  --kit-avatar-active-shade: initial;
+  --kit-avatar-hover-fg: initial;
+  --kit-avatar-pressed-fg: initial;
+  --kit-avatar-bg: var(--kit-avatar-color, var(--kit-color-surface-3));
+  --kit-avatar-fg: var(--kit-avatar-on-color, var(--kit-avatar-contrast, var(--kit-color-text)));
+  --kit-avatar-ink: var(--kit-avatar-color, var(--kit-color-text));
+  --kit-avatar-hover: color-mix(in oklab, var(--kit-avatar-bg), var(--kit-avatar-fg) 8%);
+  --kit-avatar-pressed: color-mix(in oklab, var(--kit-avatar-bg), var(--kit-avatar-fg) 14%);
+  --kit-avatar-soft: color-mix(in oklab, var(--kit-avatar-bg) 16%, transparent);
+  --kit-avatar-border: color-mix(in oklab, var(--kit-avatar-bg), var(--kit-avatar-fg) 20%);
+  --kit-avatar-active: color-mix(
+  	in oklab,
+  	var(--kit-avatar-color),
+  	var(--kit-avatar-fg) var(--kit-avatar-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-avatar) {
+    --kit-avatar-contrast: color(from var(--kit-avatar-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-avatar) {
+  --kit-avatar-size: calc(var(--kit-avatar-h) + var(--kit-avatar-density-offset) / 2);
+}
+
+.kit-avatar {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--kit-avatar-size);
+  height: var(--kit-avatar-size);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--kit-avatar-radius);
+  background-color: var(--kit-avatar-bg);
+  color: var(--kit-avatar-fg);
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
+  transition-property: background-color, color, box-shadow;
+  transition-duration: var(--kit-animation-component);
+  transition-timing-function: ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-avatar {
+    transition: none;
+  }
+}
+.kit-avatar[data-type=label] {
+  font-size: var(--kit-avatar-font);
+  text-transform: uppercase;
+}
+.kit-avatar__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  padding-inline: 0.25rem;
+}
+.kit-avatar > :global(img) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/**
+ * size
+ * @link https://lapikit.dev/docs/components/avatar#size
+ */
+:where(.kit-avatar[data-size=xs]) {
+  --kit-avatar-h: 2rem;
+  --kit-avatar-font: var(--kit-font-xs);
+}
+
+:where(.kit-avatar[data-size=sm]) {
+  --kit-avatar-h: 2.5rem;
+  --kit-avatar-font: var(--kit-font-sm);
+}
+
+:where(.kit-avatar[data-size=md]) {
+  --kit-avatar-h: 3rem;
+  --kit-avatar-font: var(--kit-font-md);
+}
+
+:where(.kit-avatar[data-size=lg]) {
+  --kit-avatar-h: 3.5rem;
+  --kit-avatar-font: var(--kit-font-lg);
+}
+
+:where(.kit-avatar[data-size=xl]) {
+  --kit-avatar-h: 4rem;
+  --kit-avatar-font: var(--kit-font-xl);
+}
+
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-avatar[data-rounded="0"]) {
+  --kit-avatar-radius: var(--kit-shape-none);
+}
+
+:where(.kit-avatar[data-rounded=xs]) {
+  --kit-avatar-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-avatar[data-rounded=sm]) {
+  --kit-avatar-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-avatar[data-rounded=md]) {
+  --kit-avatar-radius: var(--kit-shape-md);
+}
+
+:where(.kit-avatar[data-rounded=lg]) {
+  --kit-avatar-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-avatar[data-rounded=xl]) {
+  --kit-avatar-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-avatar[data-rounded=full]) {
+  --kit-avatar-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/avatar#density
+ */
+:where(.kit-avatar[data-density=dense]) {
+  --kit-avatar-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-avatar[data-density=compact]) {
+  --kit-avatar-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-avatar[data-density=default]) {
+  --kit-avatar-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-avatar[data-density=comfortable]) {
+  --kit-avatar-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-avatar[data-density=spacious]) {
+  --kit-avatar-density-offset: var(--kit-density-spacious);
+}</style>

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

@@ -1,11 +1,10 @@
-import type { Component, DensityType, ElevationProps, RoundedType, SizeType } from '../../@types';
+import type { ColorProps, Component, ElevationProps, RoundedType, SizeType } from '../../@types';
 export interface AvatarProps extends Component {
     ref?: HTMLElement | null;
     label?: string;
     size?: SizeType;
-    density?: DensityType;
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     rounded?: RoundedType | 'full';
     elevation?: ElevationProps;
-    color?: string;
-    background?: string;
+    color?: ColorProps;
 }