lapikit 0.7.3 → 0.7.4

package/dist/components/app/app.svelte

@@ -1,43 +1,27 @@
 <script lang="ts">
-	import { makeComponentProps } from '../../html-mapped';
-	import { useClassName, useStyles } from '../../utils';
+	import { useComponentAttrs } from '../../utils';
 	import type { AppProps } from './app.types';
 
 	let {
 		ref = $bindable(),
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		...rest
 	}: AppProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(makeComponentProps(rest));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-application',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
+	let attrs = $derived(
+		useComponentAttrs('kit-application', { className, sClass, styleAttr, sStyle }, rest)
 	);
 </script>
 
-<div id="kit-app" bind:this={ref} class={componentClass} style={componentStyle} {...restProps}>
+<div id="kit-app" bind:this={ref} class={attrs.class} style={attrs.style} {...attrs.rest}>
 	{@render children?.()}
 </div>
 
-<style>:root {
+<style>:global :where(:root) {
   --kit-shape-none: 0;
   --kit-shape-xs: 0.25rem;
   --kit-shape-sm: 0.375rem;
@@ -48,21 +32,20 @@
   --kit-animation-component: 150ms;
   --kit-outline-weight: 1px;
 }
-
-:global html {
-  --kit-font-xs: 13px;
-  --kit-font-sm: 14px;
-  --kit-font-md: 15px;
-  --kit-font-lg: 16px;
-  --kit-font-xl: 17px;
-  --kit-space-compact: 2px;
-  --kit-space-default: 4px;
-  --kit-space-comfortable: 6px;
-  --kit-density-dense: -8px;
-  --kit-density-compact: -4px;
-  --kit-density-default: 0px;
-  --kit-density-comfortable: 4px;
-  --kit-density-spacious: 8px;
+:global :where(html) {
+  --kit-font-xs: 0.8125rem;
+  --kit-font-sm: 0.875rem;
+  --kit-font-md: 0.9375rem;
+  --kit-font-lg: 1rem;
+  --kit-font-xl: 1.0625rem;
+  --kit-space-compact: 0.125rem;
+  --kit-space-default: 0.25rem;
+  --kit-space-comfortable: 0.375rem;
+  --kit-density-dense: -0.5rem;
+  --kit-density-compact: -0.25rem;
+  --kit-density-default: 0rem;
+  --kit-density-comfortable: 0.25rem;
+  --kit-density-spacious: 0.5rem;
   --kit-shadow-opacity: 30%;
   --kit-shadow-ambient-opacity: 15%;
   --kit-disabled-opacity: 0.55;
@@ -71,8 +54,7 @@
   	'Segoe UI Symbol', 'Noto Color Emoji';
   --kit-color-transparent: transparent;
 }
-:global html:not([data-kit-theme]),
-:global [data-kit-theme=light] {
+:global :where(html:not([data-kit-theme]), [data-kit-theme=light]) {
   color-scheme: light;
   --kit-color-surface: hsl(0 0% 100%);
   --kit-color-surface-1: hsl(240 15% 96.5%);
@@ -99,7 +81,7 @@
   --kit-color-on-info: hsl(0 0% 100%);
   --kit-color-focus: hsl(35 90% 56%);
 }
-:global [data-kit-theme=dark] {
+:global :where([data-kit-theme=dark]) {
   color-scheme: dark;
   --kit-color-surface: hsl(240 3% 11%);
   --kit-color-surface-1: hsl(240 2% 17.5%);
@@ -127,7 +109,7 @@
   --kit-color-focus: hsl(35 90% 62%);
 }
 @media (prefers-color-scheme: light) {
-  :global [data-kit-theme=system] {
+  :global :where([data-kit-theme=system]) {
     color-scheme: light;
     --kit-color-surface: hsl(0 0% 100%);
     --kit-color-surface-1: hsl(240 15% 96.5%);
@@ -156,7 +138,7 @@
   }
 }
 @media (prefers-color-scheme: dark) {
-  :global [data-kit-theme=system] {
+  :global :where([data-kit-theme=system]) {
     color-scheme: dark;
     --kit-color-surface: hsl(240 3% 11%);
     --kit-color-surface-1: hsl(240 2% 17.5%);

package/dist/components/appbar/appbar.svelte

@@ -1,77 +1,37 @@
 <script lang="ts">
-	import { useClassName, useElevation, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
+	import { useComponentAttrs, useElevation } from '../../utils';
 	import type { AppbarProps } from './appbar.types.js';
 
 	let {
 		ref = $bindable(),
 		is = 'header',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		classContent,
 		size = 'md',
 		variant = 'filled',
 		rounded = 0,
-		background,
 		color,
 		density = 'default',
 		elevation,
 		...rest
 	}: AppbarProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
+	let attrs = $derived(
+		useComponentAttrs('kit-appbar', { className, sClass, styleAttr, sStyle, color }, rest)
 	);
-
 	let elevationState = $derived(useElevation(elevation));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-appbar',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let normalizedClassContent = $derived(
-		Array.isArray(classContent) ? classContent.filter(Boolean).join(' ') : classContent
-	);
-
-	let wrapperClass = $derived(
-		useClassName({
-			baseClass: 'kit-appbar__wrapper',
-			className: normalizedClassContent
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-appbar-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-appbar-bg:${background && `var(--kit-color-${background})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let hasOutline = $derived(variant === 'outline' || variant === 'surface');
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
-	class={componentClass}
-	style={resolvedStyle}
+	class={attrs.class}
+	style={attrs.style}
 	data-size={size}
 	data-variant={variant}
 	data-density={density}
@@ -79,153 +39,208 @@
 	data-elevation={elevationState.base}
 	data-elevation-hover={elevationState.hover}
 	data-elevation-active={elevationState.active}
-	{...restProps}
+	{...attrs.rest}
 >
-	{#if variant === 'outline'}
+	{#if hasOutline}
 		<span class="outline"></span>
 	{/if}
 
-	<div class={wrapperClass}>
+	<div class={['kit-appbar__wrapper', classContent]}>
 		{@render children?.()}
 	</div>
 </svelte:element>
 
-<style>
-	.kit-appbar {
-		display: flex;
-		align-items: center;
-		box-sizing: border-box;
-		position: relative;
-		width: 100%;
-		gap: var(--kit-appbar-gap);
-		min-height: calc(var(--kit-appbar-h) + var(--kit-appbar-density-offset) / 2);
-		padding: calc(var(--kit-appbar-p) + var(--kit-appbar-density-offset) / 2);
-		border-radius: var(--kit-appbar-radius);
-		color: var(--kit-appbar-fg);
-		background-color: var(--kit-appbar-bg);
-		overflow: hidden;
-		font-size: var(--kit-appbar-font);
-		transition:
-			background 140ms ease,
-			color 140ms ease,
-			box-shadow 140ms ease,
-			translate 140ms ease;
-	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-appbar[data-rounded='0'] {
-		--kit-appbar-radius: var(--kit-shape-none);
-	}
-	.kit-appbar[data-rounded='xs'] {
-		--kit-appbar-radius: var(--kit-shape-xs);
-	}
-	.kit-appbar[data-rounded='sm'] {
-		--kit-appbar-radius: var(--kit-shape-sm);
-	}
-	.kit-appbar[data-rounded='md'] {
-		--kit-appbar-radius: var(--kit-shape-md);
-	}
-	.kit-appbar[data-rounded='lg'] {
-		--kit-appbar-radius: var(--kit-shape-lg);
-	}
-	.kit-appbar[data-rounded='xl'] {
-		--kit-appbar-radius: var(--kit-shape-xl);
-	}
-	.kit-appbar[data-rounded='full'] {
-		--kit-appbar-radius: var(--kit-shape-full);
-	}
-
-	/** 
-	 * density
-	 * @link no links
-	 */
-	.kit-appbar[data-density='compact'] {
-		--kit-appbar-density-offset: var(--kit-density-compact);
-	}
-	.kit-appbar[data-density='default'] {
-		--kit-appbar-density-offset: var(--kit-density-default);
-	}
-	.kit-appbar[data-density='comfortable'] {
-		--kit-appbar-density-offset: var(--kit-density-comfortable);
-	}
-
-	/** 
-	 * variant
-	 * @link no links...
-	 */
-	.kit-appbar[data-variant='filled'] {
-		--kit-appbar-bg: var(--kit-color-surface-1);
-		--kit-appbar-fg: var(--kit-color-text);
-
-		--kit-appbar-hover-bg: color-mix(in oklab, var(--kit-appbar-bg), black 10%);
-		--kit-appbar-active-bg: color-mix(in oklab, var(--kit-appbar-bg), black 16%);
-	}
-	.kit-appbar[data-variant='outline'] {
-		--kit-appbar-bg: transparent;
-		--kit-appbar-fg: var(--kit-color-text);
-		--kit-appbar-bd: var(--kit-appbar-fg);
-
-		--kit-appbar-hover-bg: color-mix(in oklab, var(--kit-appbar-fg), transparent 80%);
-		--kit-appbar-active-bg: color-mix(in oklab, var(--kit-appbar-fg), transparent 92%);
-	}
-	.kit-appbar[data-variant='text'] {
-		--kit-appbar-bg: transparent;
-		--kit-appbar-fg: var(--kit-color-text);
-
-		--kit-appbar-hover-bg: color-mix(in oklab, var(--kit-appbar-fg), transparent 80%);
-		--kit-appbar-active-bg: color-mix(in oklab, var(--kit-appbar-fg), transparent 92%);
-	}
-
-	/**
-	* size
-	* @link nothing...
-	*/
-	.kit-appbar[data-size='xs'] {
-		--kit-appbar-h: 32px;
-		--kit-appbar-p: 8px;
-		--kit-appbar-gap: var(--kit-space-compact);
-		--kit-appbar-font: var(--kit-font-xs);
-	}
-	.kit-appbar[data-size='sm'] {
-		--kit-appbar-h: 40px;
-		--kit-appbar-p: 10px;
-		--kit-appbar-gap: var(--kit-space-default);
-		--kit-appbar-font: var(--kit-font-sm);
-	}
-	.kit-appbar[data-size='md'] {
-		--kit-appbar-h: 48px;
-		--kit-appbar-p: 12px;
-		--kit-appbar-gap: var(--kit-space-default);
-		--kit-appbar-font: var(--kit-font-md);
-	}
-	.kit-appbar[data-size='lg'] {
-		--kit-appbar-h: 56px;
-		--kit-appbar-p: 16px;
-		--kit-appbar-gap: var(--kit-space-default);
-		--kit-appbar-font: var(--kit-font-lg);
-	}
-	.kit-appbar[data-size='xl'] {
-		--kit-appbar-h: 64px;
-		--kit-appbar-p: 20px;
-		--kit-appbar-gap: var(--kit-space-comfortable);
-		--kit-appbar-font: var(--kit-font-xl);
-	}
-
-	.kit-appbar__wrapper {
-		position: relative;
-		z-index: 1;
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-		gap: var(--kit-appbar-gap);
-		width: 100%;
-		margin: 0 auto;
-	}
-
-	.kit-appbar .outline {
-		--outline-color: var(--kit-appbar-bd);
-	}
-</style>
+<style>:where(.kit-appbar) {
+  --kit-appbar-color: initial;
+  --kit-appbar-on-color: initial;
+  --kit-appbar-active-fg: initial;
+  --kit-appbar-active-shade: initial;
+  --kit-appbar-hover-fg: initial;
+  --kit-appbar-pressed-fg: initial;
+  --kit-appbar-bg: var(--kit-appbar-color, var(--kit-color-surface-1));
+  --kit-appbar-fg: var(--kit-appbar-on-color, var(--kit-appbar-contrast, var(--kit-color-text)));
+  --kit-appbar-ink: var(--kit-appbar-color, var(--kit-color-text));
+  --kit-appbar-hover: color-mix(in oklab, var(--kit-appbar-bg), var(--kit-appbar-fg) 8%);
+  --kit-appbar-pressed: color-mix(in oklab, var(--kit-appbar-bg), var(--kit-appbar-fg) 14%);
+  --kit-appbar-soft: color-mix(in oklab, var(--kit-appbar-bg) 16%, transparent);
+  --kit-appbar-border: color-mix(in oklab, var(--kit-appbar-bg), var(--kit-appbar-fg) 20%);
+  --kit-appbar-active: color-mix(
+  	in oklab,
+  	var(--kit-appbar-color),
+  	var(--kit-appbar-fg) var(--kit-appbar-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-appbar) {
+    --kit-appbar-contrast: color(from var(--kit-appbar-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-appbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--kit-appbar-gap);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: calc(var(--kit-appbar-h) + var(--kit-appbar-density-offset) / 2);
+  padding: calc(var(--kit-appbar-p) + var(--kit-appbar-density-offset) / 2);
+  overflow: hidden;
+  border-radius: var(--kit-appbar-radius);
+  background-color: var(--kit-appbar-bg);
+  color: var(--kit-appbar-fg);
+  font-size: var(--kit-appbar-font);
+  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-appbar {
+    transition: none;
+  }
+}
+.kit-appbar__wrapper {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--kit-appbar-gap);
+  width: 100%;
+  margin: 0 auto;
+}
+
+/**
+ * size
+ * @link https://lapikit.dev/docs/components/appbar#size
+ */
+:where(.kit-appbar[data-size=xs]) {
+  --kit-appbar-h: 2rem;
+  --kit-appbar-p: 0.5rem;
+  --kit-appbar-gap: 0.125rem;
+  --kit-appbar-font: var(--kit-font-xs);
+}
+
+:where(.kit-appbar[data-size=sm]) {
+  --kit-appbar-h: 2.5rem;
+  --kit-appbar-p: 0.625rem;
+  --kit-appbar-gap: 0.25rem;
+  --kit-appbar-font: var(--kit-font-sm);
+}
+
+:where(.kit-appbar[data-size=md]) {
+  --kit-appbar-h: 3rem;
+  --kit-appbar-p: 0.75rem;
+  --kit-appbar-gap: 0.25rem;
+  --kit-appbar-font: var(--kit-font-md);
+}
+
+:where(.kit-appbar[data-size=lg]) {
+  --kit-appbar-h: 3.5rem;
+  --kit-appbar-p: 1rem;
+  --kit-appbar-gap: 0.25rem;
+  --kit-appbar-font: var(--kit-font-lg);
+}
+
+:where(.kit-appbar[data-size=xl]) {
+  --kit-appbar-h: 4rem;
+  --kit-appbar-p: 1.25rem;
+  --kit-appbar-gap: 0.375rem;
+  --kit-appbar-font: var(--kit-font-xl);
+}
+
+/**
+ * variant
+ * @link https://lapikit.dev/docs/components/appbar#variants
+ */
+:where(.kit-appbar[data-variant=tonal]) {
+  --kit-appbar-bg: color-mix(in oklab, var(--kit-appbar-ink) 16%, transparent);
+  --kit-appbar-fg: var(--kit-appbar-ink);
+  --kit-appbar-border: transparent;
+  --kit-appbar-active: color-mix(in oklab, var(--kit-appbar-ink) 28%, transparent);
+  --kit-appbar-active-fg: var(--kit-appbar-ink);
+}
+
+:where(.kit-appbar[data-variant=outline]) {
+  --kit-appbar-bg: transparent;
+  --kit-appbar-fg: var(--kit-appbar-ink);
+  --kit-appbar-border: var(--kit-appbar-color, var(--kit-color-border));
+  --kit-appbar-active: color-mix(in oklab, var(--kit-appbar-ink) 14%, transparent);
+  --kit-appbar-active-fg: var(--kit-appbar-ink);
+}
+
+:where(.kit-appbar[data-variant=surface]) {
+  --kit-appbar-bg: color-mix(in oklab, var(--kit-appbar-ink) 8%, transparent);
+  --kit-appbar-fg: var(--kit-appbar-ink);
+  --kit-appbar-border: color-mix(in oklab, var(--kit-appbar-ink) 35%, transparent);
+  --kit-appbar-active: color-mix(in oklab, var(--kit-appbar-ink) 18%, transparent);
+  --kit-appbar-active-fg: var(--kit-appbar-ink);
+}
+
+:where(.kit-appbar[data-variant=text]) {
+  --kit-appbar-bg: transparent;
+  --kit-appbar-fg: var(--kit-appbar-ink);
+  --kit-appbar-border: transparent;
+  --kit-appbar-active: color-mix(in oklab, var(--kit-appbar-ink) 14%, transparent);
+  --kit-appbar-active-fg: var(--kit-appbar-ink);
+}
+
+:where(.kit-appbar .outline) {
+  --outline-color: var(--kit-appbar-border);
+}
+
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-appbar[data-rounded="0"]) {
+  --kit-appbar-radius: var(--kit-shape-none);
+}
+
+:where(.kit-appbar[data-rounded=xs]) {
+  --kit-appbar-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-appbar[data-rounded=sm]) {
+  --kit-appbar-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-appbar[data-rounded=md]) {
+  --kit-appbar-radius: var(--kit-shape-md);
+}
+
+:where(.kit-appbar[data-rounded=lg]) {
+  --kit-appbar-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-appbar[data-rounded=xl]) {
+  --kit-appbar-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-appbar[data-rounded=full]) {
+  --kit-appbar-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/appbar#density
+ */
+:where(.kit-appbar[data-density=dense]) {
+  --kit-appbar-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-appbar[data-density=compact]) {
+  --kit-appbar-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-appbar[data-density=default]) {
+  --kit-appbar-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-appbar[data-density=comfortable]) {
+  --kit-appbar-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-appbar[data-density=spacious]) {
+  --kit-appbar-density-offset: var(--kit-density-spacious);
+}</style>

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

@@ -1,15 +1,15 @@
-import type { Component, DensityType, ElevationProps, RoundedType, SizeType } from '../../@types';
-type Variant = 'filled' | 'outline' | 'text';
+import type { ClassValue } from 'svelte/elements';
+import type { ColorProps, Component, ElevationProps, RoundedType, SizeType } from '../../@types';
+type Variant = 'filled' | 'tonal' | 'outline' | 'surface' | 'text';
 export interface AppbarProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'header' | 'nav';
     variant?: Variant;
     rounded?: RoundedType | 'full';
-    density?: DensityType;
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
     size?: SizeType;
-    color?: string;
-    background?: string;
-    classContent?: string | string[] | undefined;
+    color?: ColorProps;
+    classContent?: ClassValue;
     elevation?: ElevationProps;
 }
 export {};