lapikit 0.7.2 → 0.7.4

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

@@ -1,18 +1,18 @@
-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 ButtonProps extends Component {
     ref?: HTMLElement | null;
     is?: 'button' | 'a' | 'input';
     input?: boolean;
     href?: string;
-    variant?: 'outline' | 'text' | 'filled' | 'link';
-    density?: DensityType;
+    variant?: 'filled' | 'tonal' | 'outline' | 'text' | 'plain' | 'surface' | 'link';
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     active?: boolean;
     loading?: boolean;
     disabled?: boolean;
     checked?: boolean;
     size?: SizeType;
-    rounded?: RoundedType;
+    rounded?: RoundedType | 'full';
     type?: 'button' | 'submit' | 'reset' | 'checkbox' | 'radio';
     value?: string | number | boolean;
     label?: string;
@@ -24,6 +24,5 @@ export interface ButtonProps extends Component {
     append?: Snippet;
     prepend?: Snippet;
     elevation?: ElevationProps;
-    color?: string;
-    background?: string;
+    color?: ColorProps;
 }

package/dist/components/card/card.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { useClassName, useElevation, useIsInteractive, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
+	import { useComponentAttrs, useElevation, useIsInteractive } from '../../utils';
 	import { ripple } from '../../animations';
 	import type { CardProps } from './card.types.js';
 
@@ -8,8 +7,8 @@
 		ref = $bindable(),
 		is = 'div',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		href,
@@ -17,61 +16,35 @@
 		variant = 'filled',
 		density = 'default',
 		rounded = 'md',
-		interactive = false,
+		interactive,
 		active = false,
 		disabled = false,
 		noRipple,
 		color,
-		background,
 		elevation,
 		...rest
 	}: CardProps = $props();
 
 	let tag = $derived((href && 'a') || is);
-	let isInteractive = $derived(useIsInteractive(rest, tag, ['a', 'button'], interactive));
+	let isInteractive = $derived(interactive ?? useIsInteractive(rest, tag, ['a', 'button']));
 	let isDisabled = $derived(!!disabled);
 	let resolvedHref = $derived(tag === 'a' && !isDisabled ? href : undefined);
 	let resolvedType = $derived(tag === 'button' ? (type ?? 'button') : undefined);
 	let resolvedDisabled = $derived(tag === 'button' ? isDisabled : undefined);
 	let resolvedTabIndex = $derived(tag === 'a' && isDisabled ? -1 : undefined);
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let elevationState = $derived(useElevation(elevation));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-card-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-card-bg:${background && `var(--kit-color-${background})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
+	let attrs = $derived(
+		useComponentAttrs('kit-card', { className, sClass, styleAttr, sStyle, color, active }, rest)
 	);
+	let elevationState = $derived(useElevation(elevation));
+	let hasOutline = $derived(variant === 'outline' || variant === 'surface');
 </script>
 
 <svelte:element
 	this={tag}
 	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
+	class={attrs.class}
+	style={attrs.style}
 	href={resolvedHref}
 	type={resolvedType}
 	disabled={resolvedDisabled}
@@ -88,149 +61,214 @@
 	aria-disabled={isDisabled || undefined}
 	use:ripple={{
 		component: 'card',
-		disabled: noRipple || disabled || !isInteractive
+		disabled: noRipple || isDisabled || !isInteractive
 	}}
-	{...restProps}
+	{...attrs.rest}
 >
-	{#if variant === 'outline'}
+	{#if hasOutline}
 		<span class="outline"></span>
 	{/if}
 
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-card {
-		display: flex;
-		position: relative;
-		flex-direction: column;
-		gap: var(--kit-card-gap);
-		background: var(--kit-card-bg);
-		color: var(--kit-card-fg);
-		border-radius: var(--kit-card-radius);
-		border: 0;
-		box-sizing: border-box;
-		padding: calc(10px + var(--kit-card-density-offset) / 2);
-		transition:
-			background 140ms ease,
-			color 140ms ease,
-			box-shadow 140ms ease,
-			translate 140ms ease;
-	}
-
-	a.kit-card {
-		text-decoration: none;
-	}
-
-	button.kit-card {
-		appearance: none;
-		border: 0;
-		background: none;
-		font: inherit;
-		text-align: inherit;
-	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-card[data-rounded='0'] {
-		--kit-card-radius: var(--kit-shape-none);
-	}
-	.kit-card[data-rounded='xs'] {
-		--kit-card-radius: var(--kit-shape-xs);
-	}
-	.kit-card[data-rounded='sm'] {
-		--kit-card-radius: var(--kit-shape-sm);
-	}
-	.kit-card[data-rounded='md'] {
-		--kit-card-radius: var(--kit-shape-md);
-	}
-	.kit-card[data-rounded='lg'] {
-		--kit-card-radius: var(--kit-shape-lg);
-	}
-	.kit-card[data-rounded='xl'] {
-		--kit-card-radius: var(--kit-shape-xl);
-	}
-
-	/** 
-	 * density
-	 * @link https://lapikit.dev/docs/components/card#density 
-	 */
-	.kit-card[data-density='compact'] {
-		--kit-card-gap: var(--kit-space-compact);
-		--kit-card-density-offset: var(--kit-density-compact);
-	}
-	.kit-card[data-density='default'] {
-		--kit-card-gap: var(--kit-space-default);
-		--kit-card-density-offset: var(--kit-density-default);
-	}
-	.kit-card[data-density='comfortable'] {
-		--kit-card-gap: var(--kit-space-comfortable);
-		--kit-card-density-offset: var(--kit-density-comfortable);
-	}
-
-	/** 
-	 * variant
-	 * @link https://lapikit.dev/docs/components/card#variants
-	 */
-	.kit-card[data-variant='filled'] {
-		--kit-card-bg: var(--kit-color-surface-1);
-		--kit-card-fg: var(--kit-color-text);
-
-		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-bg), black 10%);
-		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-bg), black 16%);
-	}
-	.kit-card[data-variant='outline'] {
-		--kit-card-bg: transparent;
-		--kit-card-fg: var(--kit-color-text);
-		--kit-card-bd: var(--kit-card-fg);
-
-		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-fg), transparent 80%);
-		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-fg), transparent 92%);
-	}
-	.kit-card[data-variant='text'] {
-		--kit-card-bg: transparent;
-		--kit-card-fg: var(--kit-color-text);
-
-		--kit-card-hover-bg: color-mix(in oklab, var(--kit-card-fg), transparent 80%);
-		--kit-card-active-bg: color-mix(in oklab, var(--kit-card-fg), transparent 92%);
-	}
-
-	.kit-card[data-interactive='true'][data-disabled='false'] {
-		cursor: pointer;
-	}
-
-	.kit-card[data-interactive='true'][data-disabled='false']:hover {
-		background: var(--kit-card-hover-bg);
-	}
-
-	.kit-card[data-variant='text'][data-interactive='true'][data-disabled='false']:hover {
-		background: var(--kit-card-hover-bg);
-	}
-
-	.kit-card[data-interactive='true'][data-active='true'][data-disabled='false'],
-	.kit-card[data-interactive='true'][data-disabled='false']:active {
-		translate: 0 0;
-		background: var(--kit-card-active-bg);
-	}
-
-	.kit-card[data-variant='text'][data-interactive='true'][data-active='true'][data-disabled='false'],
-	.kit-card[data-variant='text'][data-interactive='true'][data-disabled='false']:active {
-		background: var(--kit-card-active-bg);
-	}
-
-	.kit-card[data-interactive='true'][data-disabled='false']:focus-visible {
-		outline: 2px solid var(--kit-color-focus);
-		outline-offset: 2px;
-	}
-
-	.kit-card[data-disabled='true'] {
-		opacity: var(--kit-disabled-opacity, 0.55);
-		pointer-events: none;
-	}
-
-	.kit-card .outline {
-		--outline-color: var(--kit-card-bd);
-	}
-</style>
+<style>:where(.kit-card) {
+  --kit-card-color: initial;
+  --kit-card-on-color: initial;
+  --kit-card-active-fg: initial;
+  --kit-card-active-shade: initial;
+  --kit-card-hover-fg: initial;
+  --kit-card-pressed-fg: initial;
+  --kit-card-bg: var(--kit-card-color, var(--kit-color-surface-1));
+  --kit-card-fg: var(--kit-card-on-color, var(--kit-card-contrast, var(--kit-color-text)));
+  --kit-card-ink: var(--kit-card-color, var(--kit-color-text));
+  --kit-card-hover: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 8%);
+  --kit-card-pressed: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 14%);
+  --kit-card-soft: color-mix(in oklab, var(--kit-card-bg) 16%, transparent);
+  --kit-card-border: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 20%);
+  --kit-card-active: color-mix(
+  	in oklab,
+  	var(--kit-card-color),
+  	var(--kit-card-fg) var(--kit-card-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-card) {
+    --kit-card-contrast: color(from var(--kit-card-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-card) {
+  --kit-card-gap: calc(var(--kit-space-default) + var(--kit-card-density-offset) / 2);
+  --kit-card-padding: calc(10px + var(--kit-card-density-offset) / 2);
+}
+
+.kit-card {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: var(--kit-card-gap);
+  background-color: var(--kit-card-bg);
+  color: var(--kit-card-fg);
+  border-radius: var(--kit-card-radius);
+  border: 0;
+  box-sizing: border-box;
+  padding: var(--kit-card-padding);
+  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-card {
+    transition: none;
+  }
+}
+
+/* native resets: no background here, it would beat the background of .kit-card */
+a.kit-card {
+  text-decoration: none;
+}
+
+button.kit-card {
+  appearance: none;
+  border: 0;
+  font: inherit;
+  text-align: inherit;
+}
+
+/**
+ * variant
+ * @link https://lapikit.dev/docs/components/card#variants
+ */
+:where(.kit-card[data-variant=tonal]) {
+  --kit-card-bg: color-mix(in oklab, var(--kit-card-ink) 16%, transparent);
+  --kit-card-fg: var(--kit-card-ink);
+  --kit-card-border: transparent;
+  --kit-card-active: color-mix(in oklab, var(--kit-card-ink) 28%, transparent);
+  --kit-card-active-fg: var(--kit-card-ink);
+}
+
+:where(.kit-card[data-variant=text]) {
+  --kit-card-bg: transparent;
+  --kit-card-fg: var(--kit-card-ink);
+  --kit-card-border: transparent;
+  --kit-card-active: color-mix(in oklab, var(--kit-card-ink) 14%, transparent);
+  --kit-card-active-fg: var(--kit-card-ink);
+}
+
+:where(.kit-card[data-variant=plain]) {
+  --kit-card-bg: transparent;
+  --kit-card-fg: var(--kit-card-ink);
+  --kit-card-border: transparent;
+  --kit-card-hover: transparent;
+  --kit-card-pressed: transparent;
+  --kit-card-hover-fg: color-mix(in oklab, var(--kit-card-fg) 72%, transparent);
+  --kit-card-pressed-fg: color-mix(in oklab, var(--kit-card-fg) 56%, transparent);
+  --kit-card-active: transparent;
+  --kit-card-active-fg: var(--kit-card-color, var(--kit-color-accent));
+}
+
+:where(.kit-card[data-variant=outline]) {
+  --kit-card-bg: transparent;
+  --kit-card-fg: var(--kit-card-ink);
+  --kit-card-border: var(--kit-card-color, var(--kit-color-border));
+  --kit-card-active: color-mix(in oklab, var(--kit-card-ink) 14%, transparent);
+  --kit-card-active-fg: var(--kit-card-ink);
+}
+
+:where(.kit-card[data-variant=surface]) {
+  --kit-card-bg: color-mix(in oklab, var(--kit-card-ink) 8%, transparent);
+  --kit-card-fg: var(--kit-card-ink);
+  --kit-card-border: color-mix(in oklab, var(--kit-card-ink) 35%, transparent);
+  --kit-card-active: color-mix(in oklab, var(--kit-card-ink) 18%, transparent);
+  --kit-card-active-fg: var(--kit-card-ink);
+}
+
+:where(.kit-card .outline) {
+  --outline-color: var(--kit-card-border);
+}
+
+:where(.kit-card[data-active=true]) {
+  --kit-card-bg: var(--kit-card-active, var(--kit-color-accent));
+  --kit-card-fg: var(
+  	--kit-card-active-fg,
+  	var(--kit-card-on-color, var(--kit-card-contrast, var(--kit-color-on-accent)))
+  );
+}
+
+/**
+ * interactive: hover, pressed, focus-visible and disabled
+ */
+.kit-card[data-interactive=true]:not([data-disabled=true]) {
+  cursor: pointer;
+}
+.kit-card[data-interactive=true]:not([data-disabled=true]):hover {
+  background-color: var(--kit-card-hover);
+  color: var(--kit-card-hover-fg, var(--kit-card-fg));
+}
+.kit-card[data-interactive=true]:not([data-disabled=true]):active {
+  background-color: var(--kit-card-pressed);
+  color: var(--kit-card-pressed-fg, var(--kit-card-fg));
+}
+
+.kit-card:not([data-disabled=true]):focus-visible {
+  outline: 2px solid var(--kit-color-focus);
+  outline-offset: 2px;
+}
+
+.kit-card[data-disabled=true] {
+  opacity: var(--kit-disabled-opacity, 0.55);
+  pointer-events: none;
+  user-select: none;
+}
+
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-card[data-rounded="0"]) {
+  --kit-card-radius: var(--kit-shape-none);
+}
+
+:where(.kit-card[data-rounded=xs]) {
+  --kit-card-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-card[data-rounded=sm]) {
+  --kit-card-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-card[data-rounded=md]) {
+  --kit-card-radius: var(--kit-shape-md);
+}
+
+:where(.kit-card[data-rounded=lg]) {
+  --kit-card-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-card[data-rounded=xl]) {
+  --kit-card-radius: var(--kit-shape-xl);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/card#density
+ */
+:where(.kit-card[data-density=dense]) {
+  --kit-card-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-card[data-density=compact]) {
+  --kit-card-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-card[data-density=default]) {
+  --kit-card-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-card[data-density=comfortable]) {
+  --kit-card-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-card[data-density=spacious]) {
+  --kit-card-density-offset: var(--kit-density-spacious);
+}</style>

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

@@ -1,25 +1,28 @@
-import type { Component, DensityType, ElevationProps, RoundedType } from '../../@types';
+import type { ColorProps, Component, ElevationProps, RoundedType } from '../../@types';
 export interface CardProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'article' | 'section' | 'aside' | 'a' | 'button';
     href?: string;
     type?: 'button' | 'submit' | 'reset';
-    variant?: 'filled' | 'outline' | 'text';
-    density?: DensityType;
+    variant?: 'filled' | 'tonal' | 'outline' | 'text' | 'plain' | 'surface';
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     rounded?: RoundedType;
     elevation?: ElevationProps;
     interactive?: boolean;
     active?: boolean;
     disabled?: boolean;
     noRipple?: boolean;
+    color?: ColorProps;
 }
 export interface CardTitleProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    color?: string | false;
 }
 export interface CardContentProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    color?: string | false;
 }
 export interface CardMediaProps extends Component {
     ref?: HTMLElement | null;

package/dist/components/card/modules/card-actions.svelte

@@ -1,53 +1,29 @@
 <script lang="ts">
 	import type { CardActionsProps } from '../card.types';
-	import { makeComponentProps } from '../../../html-mapped';
-	import { useClassName, useStyles } from '../../../utils';
+	import { useComponentAttrs } from '../../../utils';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		...rest
 	}: CardActionsProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card-actions',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
+	let attrs = $derived(
+		useComponentAttrs('kit-card-actions', { className, sClass, styleAttr, sStyle }, rest)
 	);
 </script>
 
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={componentStyle}
-	{...restProps}
->
+<svelte:element this={is} bind:this={ref} class={attrs.class} style={attrs.style} {...attrs.rest}>
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-card-actions {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--kit-card-gap);
-	}
-</style>
+<style>.kit-card-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kit-card-gap);
+}</style>

package/dist/components/card/modules/card-container.svelte

@@ -1,51 +1,27 @@
 <script lang="ts">
 	import type { CardContainerProps } from '../card.types';
-	import { makeComponentProps } from '../../../html-mapped';
-	import { useClassName, useStyles } from '../../../utils';
+	import { useComponentAttrs } from '../../../utils';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		...rest
 	}: CardContainerProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card-container',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
+	let attrs = $derived(
+		useComponentAttrs('kit-card-container', { className, sClass, styleAttr, sStyle }, rest)
 	);
 </script>
 
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={componentStyle}
-	{...restProps}
->
+<svelte:element this={is} bind:this={ref} class={attrs.class} style={attrs.style} {...attrs.rest}>
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-card-container {
-		gap: var(--kit-card-gap);
-	}
-</style>
+<style>.kit-card-container {
+  gap: var(--kit-card-gap);
+}</style>