lapikit 0.7.1 → 0.7.3

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>

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

@@ -1,64 +1,35 @@
 <script lang="ts">
 	import type { CardContentProps } 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,
 		color,
 		...rest
 	}: CardContentProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card-content',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[componentStyle, color ? `--kit-card-content-fg:${color && `var(--kit-color-${color})`}` : '']
-			.filter(Boolean)
-			.join('; ')
+	let attrs = $derived(
+		useComponentAttrs('kit-card-content', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 </script>
 
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
-	{...restProps}
->
+<svelte:element this={is} bind:this={ref} class={attrs.class} style={attrs.style} {...attrs.rest}>
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-card-content {
-		color: var(--kit-card-content-fg, --kit-card-fg);
-		display: block;
-		line-height: 1.45;
-	}
+<style>.kit-card-content {
+  --kit-card-content-color: initial;
+  color: var(--kit-card-content-color, currentColor);
+  display: block;
+  line-height: 1.45;
+}
 
-	.kit-card-content > :global(*) {
-		margin: 0;
-	}
-</style>
+.kit-card-content > :global(*) {
+  margin: 0;
+}</style>

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

@@ -1,52 +1,28 @@
 <script lang="ts">
 	import type { CardMediaProps } 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
 	}: CardMediaProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card-media',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
+	let attrs = $derived(
+		useComponentAttrs('kit-card-media', { 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-media {
-		overflow: hidden;
-		border-radius: calc(var(--kit-card-radius) - 2px);
-	}
-</style>
+<style>.kit-card-media {
+  overflow: hidden;
+  border-radius: min(var(--kit-card-radius), max(var(--kit-card-radius) - var(--kit-card-padding), var(--kit-shape-xs)));
+}</style>

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

@@ -1,67 +1,38 @@
 <script lang="ts">
 	import type { CardTitleProps } 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,
 		color,
 		...rest
 	}: CardTitleProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card-title',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[componentStyle, color ? `--kit-card-title-fg:${color && `var(--kit-color-${color})`}` : '']
-			.filter(Boolean)
-			.join('; ')
+	let attrs = $derived(
+		useComponentAttrs('kit-card-title', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
 </script>
 
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
-	{...restProps}
->
+<svelte:element this={is} bind:this={ref} class={attrs.class} style={attrs.style} {...attrs.rest}>
 	{@render children?.()}
 </svelte:element>
 
-<style>
-	.kit-card-title {
-		display: flex;
-		align-items: center;
-		gap: var(--kit-card-gap);
-		color: var(--kit-card-title-fg, --kit-card-fg);
-		font-weight: 600;
-		line-height: 1.3;
-	}
-
-	.kit-card-title > :global(*) {
-		margin: 0;
-	}
-</style>
+<style>.kit-card-title {
+  --kit-card-title-color: initial;
+  display: flex;
+  align-items: center;
+  gap: var(--kit-card-gap);
+  color: var(--kit-card-title-color, currentColor);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.kit-card-title > :global(*) {
+  margin: 0;
+}</style>

package/dist/labs/sheet/sheet.svelte

@@ -3,10 +3,15 @@
 	 * Sheet component
 	 * @description A simple sheet component for experimentation for developers Lapikit. Please don't use it in production.
 	 */
-
-	import { useComponentAttrs, useElevation } from '../../utils';
+	import { useComponentAttrs, useElevation, useIsInteractive } from '../../utils';
+	import { ripple } from '../../animations';
+	import type { SheetProps } from './sheet.types.js';
 
 	let {
+		ref = $bindable(),
+		is = 'div',
+		href,
+		type,
 		class: className,
 		style: styleAttr,
 		children,
@@ -14,47 +19,201 @@
 		's-style': sStyle,
 		elevation,
 		rounded,
+		density = 'default',
+		variant = 'filled',
 		active,
+		color,
+		interactive,
+		disabled = false,
+		noRipple,
 		...rest
-	} = $props();
+	}: SheetProps = $props();
 
+	// states
 	let attrs = $derived(
-		useComponentAttrs('kit-sheet', { className, sClass, styleAttr, sStyle }, rest)
+		useComponentAttrs('kit-sheet', { className, sClass, styleAttr, sStyle, color, active }, rest)
 	);
-
 	let elevationState = $derived(useElevation(elevation));
+	let tag = $derived((href && 'a') || is);
+	// undefined: detected (a, button, onclick...), true: forced, false: no visual feedback (still clickable)
+	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);
 </script>
 
-<div
+<svelte:element
+	this={tag}
+	bind:this={ref}
 	class={attrs.class}
 	style={attrs.style}
+	href={resolvedHref}
+	type={resolvedType}
+	disabled={resolvedDisabled}
+	tabindex={resolvedTabIndex}
 	data-rounded={rounded}
+	data-density={density}
+	data-variant={variant}
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
 	data-elevation-active={elevationState.active}
 	data-active={active}
+	data-interactive={isInteractive}
+	data-disabled={isDisabled}
+	aria-disabled={isDisabled || undefined}
+	use:ripple={{
+		component: 'sheet',
+		disabled: noRipple || isDisabled || !isInteractive
+	}}
 	{...attrs.rest}
 >
-	{@render children()}
-</div>
+	{@render children?.()}
+</svelte:element>
 
 <style>.kit-sheet {
+  --kit-sheet-color: initial;
+  --kit-sheet-on-color: initial;
+  --kit-sheet-active-fg: initial;
+  --kit-sheet-active-shade: initial;
+  --kit-sheet-hover-fg: initial;
+  --kit-sheet-pressed-fg: initial;
+  --kit-sheet-bg: var(--kit-sheet-color, var(--kit-color-surface-1));
+  --kit-sheet-fg: var(--kit-sheet-on-color, var(--kit-sheet-contrast, var(--kit-color-text)));
+  --kit-sheet-ink: var(--kit-sheet-color, var(--kit-color-text));
+  --kit-sheet-hover: color-mix(in oklab, var(--kit-sheet-bg), var(--kit-sheet-fg) 8%);
+  --kit-sheet-pressed: color-mix(in oklab, var(--kit-sheet-bg), var(--kit-sheet-fg) 14%);
+  --kit-sheet-soft: color-mix(in oklab, var(--kit-sheet-bg) 16%, transparent);
+  --kit-sheet-border: color-mix(in oklab, var(--kit-sheet-bg), var(--kit-sheet-fg) 20%);
+  --kit-sheet-active: color-mix(
+  	in oklab,
+  	var(--kit-sheet-color),
+  	var(--kit-sheet-fg) var(--kit-sheet-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  .kit-sheet {
+    --kit-sheet-contrast: color(from var(--kit-sheet-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-sheet {
+  --kit-sheet-p: 12px;
   display: flex;
-  background-color: var(--kit-color-surface-1);
-  color: var(--kit-color-text);
+  position: relative;
+  gap: calc(var(--kit-space-default) + var(--kit-sheet-density-offset) / 2);
+  padding: calc(var(--kit-sheet-p) + var(--kit-sheet-density-offset) / 2);
+  background-color: var(--kit-sheet-bg);
+  color: var(--kit-sheet-fg);
   border-radius: var(--kit-sheet-radius);
+  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-sheet {
+    transition: none;
+  }
+}
+
+/* native resets: no background here, it would beat the background of .kit-sheet */
+a.kit-sheet {
+  text-decoration: none;
+}
+
+button.kit-sheet {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  text-align: inherit;
+}
+
+.kit-sheet[data-variant=tonal] {
+  --kit-sheet-bg: color-mix(in oklab, var(--kit-sheet-ink) 16%, transparent);
+  --kit-sheet-fg: var(--kit-sheet-ink);
+  --kit-sheet-border: transparent;
+  --kit-sheet-active: color-mix(in oklab, var(--kit-sheet-ink) 28%, transparent);
+  --kit-sheet-active-fg: var(--kit-sheet-ink);
+}
+
+.kit-sheet[data-variant=text] {
+  --kit-sheet-bg: transparent;
+  --kit-sheet-fg: var(--kit-sheet-ink);
+  --kit-sheet-border: transparent;
+  --kit-sheet-active: color-mix(in oklab, var(--kit-sheet-ink) 14%, transparent);
+  --kit-sheet-active-fg: var(--kit-sheet-ink);
+}
+
+.kit-sheet[data-variant=plain] {
+  --kit-sheet-bg: transparent;
+  --kit-sheet-fg: var(--kit-sheet-ink);
+  --kit-sheet-border: transparent;
+  --kit-sheet-hover: transparent;
+  --kit-sheet-pressed: transparent;
+  --kit-sheet-hover-fg: color-mix(in oklab, var(--kit-sheet-fg) 72%, transparent);
+  --kit-sheet-pressed-fg: color-mix(in oklab, var(--kit-sheet-fg) 56%, transparent);
+  --kit-sheet-active: transparent;
+  --kit-sheet-active-fg: var(--kit-sheet-color, var(--kit-color-accent));
+}
+
+.kit-sheet[data-variant=outline] {
+  --kit-sheet-bg: transparent;
+  --kit-sheet-fg: var(--kit-sheet-ink);
+  --kit-sheet-border: var(--kit-sheet-color, var(--kit-color-border));
+  --kit-sheet-active: color-mix(in oklab, var(--kit-sheet-ink) 14%, transparent);
+  --kit-sheet-active-fg: var(--kit-sheet-ink);
+  border: var(--kit-outline-weight) solid var(--kit-sheet-border);
+}
+
+.kit-sheet[data-variant=surface] {
+  --kit-sheet-bg: color-mix(in oklab, var(--kit-sheet-ink) 8%, transparent);
+  --kit-sheet-fg: var(--kit-sheet-ink);
+  --kit-sheet-border: color-mix(in oklab, var(--kit-sheet-ink) 35%, transparent);
+  --kit-sheet-active: color-mix(in oklab, var(--kit-sheet-ink) 18%, transparent);
+  --kit-sheet-active-fg: var(--kit-sheet-ink);
+  border: var(--kit-outline-weight) solid var(--kit-sheet-border);
 }
 
 .kit-sheet[data-active=true] {
-  background: var(--kit-color-accent);
-  color: var(--kit-on-accent);
+  --kit-sheet-bg: var(--kit-sheet-active, var(--kit-color-accent));
+  --kit-sheet-fg: var(
+  	--kit-sheet-active-fg,
+  	var(--kit-sheet-on-color, var(--kit-sheet-contrast, var(--kit-color-on-accent)))
+  );
+}
+
+/**
+ * interactive: hover, pressed, focus-visible and disabled
+ */
+.kit-sheet[data-interactive=true]:not([data-disabled=true]) {
+  cursor: pointer;
+}
+.kit-sheet[data-interactive=true]:not([data-disabled=true]):hover {
+  background-color: var(--kit-sheet-hover);
+  color: var(--kit-sheet-hover-fg, var(--kit-sheet-fg));
+}
+.kit-sheet[data-interactive=true]:not([data-disabled=true]):active {
+  background-color: var(--kit-sheet-pressed);
+  color: var(--kit-sheet-pressed-fg, var(--kit-sheet-fg));
+}
+
+.kit-sheet:not([data-disabled=true]):focus-visible {
+  outline: 2px solid var(--kit-color-focus);
+  outline-offset: 2px;
+}
+
+.kit-sheet[data-disabled=true] {
+  opacity: var(--kit-disabled-opacity, 0.55);
+  pointer-events: none;
+  user-select: none;
 }
 
 /** 
  * rounded
  * @link https://lapikit.dev/docs/customize
  */
-.kit-sheet[data-rounded=none] {
+.kit-sheet[data-rounded="0"] {
   --kit-sheet-radius: var(--kit-shape-none);
 }
 
@@ -80,4 +239,28 @@
 
 .kit-sheet[data-rounded=full] {
   --kit-sheet-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/customize
+ */
+.kit-sheet[data-density=dense] {
+  --kit-sheet-density-offset: var(--kit-density-dense);
+}
+
+.kit-sheet[data-density=compact] {
+  --kit-sheet-density-offset: var(--kit-density-compact);
+}
+
+.kit-sheet[data-density=default] {
+  --kit-sheet-density-offset: var(--kit-density-default);
+}
+
+.kit-sheet[data-density=comfortable] {
+  --kit-sheet-density-offset: var(--kit-density-comfortable);
+}
+
+.kit-sheet[data-density=spacious] {
+  --kit-sheet-density-offset: var(--kit-density-spacious);
 }</style>

package/dist/labs/sheet/sheet.svelte.d.ts

@@ -1,10 +1,4 @@
-declare const Sheet: import("svelte").Component<{
-    class: any;
-    style: any;
-    children: any;
-    elevation: any;
-    rounded: any;
-    active: any;
-} & Record<string, any>, {}, "">;
+import type { SheetProps } from './sheet.types.ts';
+declare const Sheet: import("svelte").Component<SheetProps, {}, "ref">;
 type Sheet = ReturnType<typeof Sheet>;
 export default Sheet;

package/dist/labs/sheet/sheet.types.d.ts

@@ -0,0 +1,16 @@
+import type { ColorProps, Component, ElevationProps, RoundedType } from '../../@types';
+export interface SheetProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'div' | 'article' | 'section' | 'aside' | 'a' | 'button';
+    href?: string;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: 'filled' | 'tonal' | 'outline' | 'text' | 'plain' | 'surface';
+    rounded?: RoundedType | 'full';
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
+    elevation?: ElevationProps;
+    active?: boolean;
+    color?: ColorProps;
+    interactive?: boolean;
+    disabled?: boolean;
+    noRipple?: boolean;
+}

package/dist/labs/sheet/sheet.types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/color.d.ts

@@ -0,0 +1,4 @@
+import type { ColorProps } from '../@types';
+export declare function resolveColor(color: string | null | undefined): string | undefined;
+export declare function resolveOnColor(color: string | null | undefined): string | undefined;
+export declare function colorStyle(name: string, color: ColorProps | null | undefined, active?: boolean): string;

package/dist/utils/color.js

@@ -0,0 +1,40 @@
+import { DEV } from 'esm-env';
+const paletteName = /^[a-zA-Z][\w-]*$/;
+const unsafe = /[;{}]/;
+function clean(color) {
+    const value = color?.trim();
+    if (!value)
+        return undefined;
+    if (unsafe.test(value)) {
+        if (DEV)
+            console.warn(`[lapikit] color "${value}" is ignored: it cannot hold ; { or }`);
+        return undefined;
+    }
+    return value;
+}
+export function resolveColor(color) {
+    const value = clean(color);
+    if (!value)
+        return undefined;
+    return paletteName.test(value) ? `var(--kit-color-${value}, ${value})` : value;
+}
+export function resolveOnColor(color) {
+    const value = clean(color);
+    if (!value || !paletteName.test(value))
+        return undefined;
+    return `var(--kit-color-on-${value})`;
+}
+export function colorStyle(name, color, active = false) {
+    const exact = active && typeof color === 'object' && !!clean(color?.active);
+    const current = typeof color === 'object' ? (exact ? color?.active : color?.base) : color;
+    const value = resolveColor(current);
+    if (!name || !value)
+        return '';
+    const styles = [`--${name}-color: ${value}`];
+    const onColor = resolveOnColor(current);
+    if (onColor)
+        styles.push(`--${name}-on-color: ${onColor}`);
+    if (exact)
+        styles.push(`--${name}-active-shade: 0%`);
+    return styles.join('; ');
+}

package/dist/utils/components.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentAttrs, ElevationProps, ElevationState, PropValue, SStyleProp, useClassNameProps, useStylesProps } from '../@types';
+import type { ColorProps, ComponentAttrs, ElevationProps, ElevationState, PropValue, SStyleProp, useClassNameProps, useStylesProps } from '../@types';
 import type { ClassValue } from 'svelte/elements';
 /**
  * The classes of the s-class_xxx directives (class:xxx on a kit tag):
@@ -42,13 +42,19 @@ export declare function useElevation(elevation?: ElevationProps | null): Elevati
  * ({ active: isActive } -> active). The s-class_xxx directives (class:xxx on a kit tag) keep their
  * rule: class:gap={4} -> gap-4.
  *
- * @param baseClass - The class of the component ('kit-btn-v2'), '' for none.
- * @param props - The class, s-class, style and s-style props of the component.
+ * @param baseClass - The class of the component ('kit-btn'), '' for none.
+ * The color prop gives the --{baseClass}-color / --{baseClass}-on-color variables, read by the
+ * color mixin; they come before the style, so the style attribute still wins.
+ * With { base, active }, active picks the color of the active state.
+ *
+ * @param props - The class, s-class, style, s-style, color and active props of the component.
  * @param rest - The rest of the props: the s-class_xxx / s-style_xxx directives are taken out of it.
  */
-export declare function useComponentAttrs(baseClass: string, { className, sClass, styleAttr, sStyle }: {
+export declare function useComponentAttrs(baseClass: string, { className, sClass, styleAttr, sStyle, color, active }: {
     className?: ClassValue;
     sClass?: ClassValue;
     styleAttr?: string;
     sStyle?: SStyleProp;
+    color?: ColorProps | null;
+    active?: boolean;
 }, rest: Record<string, unknown>): ComponentAttrs;