lapikit 0.7.2 → 0.7.4

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

@@ -1,40 +1,20 @@
-import type { Component, DensityType, ElevationProps, RoundedType, SizeType } from '../../@types';
-import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-export interface TextfieldProps extends Component {
+import type { ClassNameType, KitClassNameType, KitStylePropertiesType, StylePropertiesType } from '../../@types';
+import type { FieldBaseProps } from '../field/field.types';
+type FieldOwnedAttributes = keyof FieldBaseProps | 'size' | 'type' | 'value' | 'min' | 'max';
+export interface TextfieldProps extends FieldBaseProps, Omit<HTMLInputAttributes, FieldOwnedAttributes | 'class' | 'style' | 'children'> {
     ref?: HTMLElement | null;
+    class?: ClassNameType;
+    style?: StylePropertiesType;
+    's-class'?: KitClassNameType;
+    's-style'?: KitStylePropertiesType;
     value?: string | number;
-    type?: 'text' | 'email' | 'password' | 'number';
-    placeholder?: string;
-    counter?: boolean;
+    type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+    /** minimal length of the value */
     min?: number;
+    /** maximal length of the value, also used by the counter */
     max?: number;
-    variant?: 'outline' | 'text' | 'filled';
-    density?: DensityType;
-    error?: boolean;
-    errorMessage?: string;
-    disabled?: boolean;
-    color?: string;
-    background?: string;
-    size?: SizeType;
-    rounded?: RoundedType;
-    readonly?: boolean;
+    counter?: boolean;
     hideSpinButtons?: boolean;
-    persistentMessage?: boolean;
-    persistentClear?: boolean;
-    clearable?: boolean;
-    message?: string;
-    messagePrefix?: string;
-    messageSuffix?: string;
-    append?: Snippet;
-    prepend?: Snippet;
-    prependInner?: Snippet;
-    appendInner?: Snippet;
-    prefix?: string;
-    suffix?: string;
-    name?: string;
-    id?: string;
-    autocomplete?: HTMLInputAttributes['autocomplete'];
-    inputmode?: HTMLInputAttributes['inputmode'];
-    elevation?: ElevationProps;
 }
+export {};

package/dist/components/toolbar/toolbar.svelte

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

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

@@ -1,18 +1,17 @@
-import type { Component, DensityType, ElevationProps, PropValue, 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';
 type Orientation = 'horizontal' | 'vertical';
 export interface ToolbarProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'header' | 'nav';
-    variant?: Variant | Record<string, Variant>;
+    variant?: Variant;
     rounded?: RoundedType | 'full';
-    density?: DensityType;
-    color?: string;
-    orientation?: Orientation | Record<string, Orientation>;
-    background?: string;
-    classContent?: string | string[] | undefined;
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
+    color?: ColorProps;
+    orientation?: Orientation;
+    classContent?: ClassValue;
     elevation?: ElevationProps;
     size?: SizeType;
-    [key: string]: PropValue | Record<string, PropValue> | unknown;
 }
 export {};