lapikit 0.6.3 → 0.6.4

package/dist/components/toolbar/toolbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useClassName, useStyles } from '../../utils/index';
+	import { useClassName, useElevation, useStyles } from '../../utils/index';
 	import { makeComponentProps } from '../../html-mapped';
 	import type { ToolbarProps } from './toolbar.types.js';
 
@@ -13,45 +13,22 @@
 		's-style': sStyle,
 		classContent,
 		variant = 'filled',
-		rounded,
+		rounded = 'md',
+		size = 'md',
 		background,
 		color,
 		density = 'default',
 		orientation = 'horizontal',
-		location,
+		elevation,
 		...rest
 	}: ToolbarProps = $props();
 
-	let safeVariant = $derived(
-		typeof variant === 'string' &&
-			(variant === 'filled' || variant === 'outline' || variant === 'text' || variant === 'dash')
-			? variant
-			: 'filled'
-	);
-
-	let safeDensity = $derived(
-		typeof density === 'string' &&
-			(density === 'compact' || density === 'comfortable' || density === 'default')
-			? density
-			: 'default'
-	);
-
-	let safeOrientation = $derived(
-		typeof orientation === 'string' && (orientation === 'horizontal' || orientation === 'vertical')
-			? orientation
-			: 'horizontal'
-	);
-
-	let safeLocation = $derived(
-		typeof location === 'string' && (location === 'top' || location === 'bottom')
-			? location
-			: undefined
-	);
-
 	let { classProps, styleProps, restProps } = $derived(
 		makeComponentProps(rest as Record<string, unknown>)
 	);
 
+	let elevationState = $derived(useElevation(elevation));
+
 	let componentClass = $derived(
 		useClassName({
 			baseClass: 'kit-toolbar',
@@ -80,16 +57,7 @@
 		})
 	);
 
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			background ? `--kit-toolbar-bg:${background}` : '',
-			color ? `--kit-toolbar-fg:${color}` : '',
-			typeof rounded === 'string' && rounded.includes('px') ? `--kit-toolbar-radius:${rounded}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 </script>
 
 <svelte:element
@@ -99,13 +67,18 @@
 	style={mergedStyle}
 	{...restProps}
 	role="toolbar"
-	data-variant={safeVariant}
-	data-density={safeDensity}
-	data-orientation={safeOrientation}
-	data-location={safeLocation}
+	data-variant={variant}
+	data-density={density}
+	data-orientation={orientation}
 	data-rounded={rounded}
+	data-size={size}
+	data-elevation={elevationState.base}
+	data-elevation-hover={elevationState.hover}
+	data-elevation-active={elevationState.active}
+	style:--kit-toolbar-fg={color && `var(--kit-color-${color})`}
+	style:--kit-toolbar-bg={background && `var(--kit-color-${background})`}
 >
-	{#if safeVariant === 'outline'}
+	{#if variant === 'outline'}
 		<span class="outline"></span>
 	{/if}
 
@@ -116,14 +89,14 @@
 
 <style>
 	.kit-toolbar {
-		--kit-toolbar-bg: var(--kit-surface-2);
+		/* --kit-toolbar-bg: var(--kit-surface-2);
 		--kit-toolbar-fg: var(--kit-fg);
 		--kit-toolbar-bd: color-mix(in oklab, var(--kit-toolbar-fg), transparent 82%);
 		--kit-toolbar-radius: 1rem;
 		--kit-toolbar-gap: 0.5rem;
 		--kit-toolbar-padding-x: 0.75rem;
 		--kit-toolbar-padding-y: 0.5rem;
-		--kit-toolbar-size: auto;
+		--kit-toolbar-size: auto; */
 
 		position: relative;
 		display: inline-flex;
@@ -132,36 +105,122 @@
 		border-radius: var(--kit-toolbar-radius);
 		background: var(--kit-toolbar-bg);
 		color: var(--kit-toolbar-fg);
-		border: 1px solid var(--kit-toolbar-bg);
+		border: 0;
+		font-size: var(--kit-toolbar-font);
+		transition:
+			background 140ms ease,
+			color 140ms ease,
+			box-shadow 140ms ease,
+			translate 140ms ease;
 	}
 
-	.kit-toolbar[data-density='compact'] {
-		--kit-toolbar-gap: 0.375rem;
-		--kit-toolbar-padding-x: 0.625rem;
-		--kit-toolbar-padding-y: 0.375rem;
-		--kit-toolbar-size: 2.625rem;
+	/** 
+	 * 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='none'] {
+		--kit-toolbar-density-scale: 0;
+		--kit-toolbar-density-h-scale: 0;
+	}
+	.kit-toolbar[data-density='compact'] {
+		--kit-toolbar-density-scale: 0.9;
+		--kit-toolbar-density-h-scale: 0.92;
+	}
 	.kit-toolbar[data-density='default'] {
-		--kit-toolbar-size: 3rem;
+		--kit-toolbar-density-scale: 1;
+		--kit-toolbar-density-h-scale: 1;
 	}
-
 	.kit-toolbar[data-density='comfortable'] {
-		--kit-toolbar-gap: 0.625rem;
-		--kit-toolbar-padding-x: 0.875rem;
-		--kit-toolbar-padding-y: 0.625rem;
-		--kit-toolbar-size: 3.5rem;
+		--kit-toolbar-density-scale: 1.1;
+		--kit-toolbar-density-h-scale: 1.15;
 	}
 
-	.kit-toolbar[data-variant='dash'] {
-		border: 1px dashed var(--kit-toolbar-bd);
+	/** 
+	 * 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[data-variant='text'],
-	.kit-toolbar[data-variant='outline'],
-	.kit-toolbar[data-variant='dash'] {
+		--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-accent);
+		--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: 24px;
+		--kit-toolbar-px: 6px;
+		--kit-toolbar-gap: 4px;
+		--kit-toolbar-font: 0.75rem;
+	}
+	.kit-toolbar[data-size='sm'] {
+		--kit-toolbar-h: 28px;
+		--kit-toolbar-px: 8px;
+		--kit-toolbar-gap: 6px;
+		--kit-toolbar-font: 0.875rem;
+	}
+	.kit-toolbar[data-size='md'] {
+		--kit-toolbar-h: 32px;
+		--kit-toolbar-px: 10px;
+		--kit-toolbar-gap: 8px;
+		--kit-toolbar-font: 1rem;
+	}
+	.kit-toolbar[data-size='lg'] {
+		--kit-toolbar-h: 38px;
+		--kit-toolbar-px: 12px;
+		--kit-toolbar-gap: 10px;
+		--kit-toolbar-font: 1.125rem;
+	}
+	.kit-toolbar[data-size='xl'] {
+		--kit-toolbar-h: 42px;
+		--kit-toolbar-px: 14px;
+		--kit-toolbar-gap: 12px;
+		--kit-toolbar-font: 1.25rem;
 	}
 
 	.kit-toolbar .outline {
@@ -178,15 +237,16 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: flex-start;
+		min-height: calc(var(--kit-toolbar-h) * var(--kit-toolbar-density-h-scale));
+		padding: calc(var(--kit-toolbar-px) * var(--kit-toolbar-density-scale));
 		gap: var(--kit-toolbar-gap);
 		width: 100%;
-		padding: var(--kit-toolbar-padding-y) var(--kit-toolbar-padding-x);
 		border-radius: inherit;
 	}
 
 	.kit-toolbar[data-orientation='horizontal'] {
 		width: 100%;
-		min-height: var(--kit-toolbar-size);
+		min-height: auto;
 	}
 
 	.kit-toolbar[data-orientation='vertical'] .kit-toolbar__wrapper {
@@ -202,46 +262,4 @@
 	.kit-toolbar[data-orientation='horizontal'] .kit-toolbar__wrapper {
 		flex-direction: row;
 	}
-
-	.kit-toolbar[data-rounded='0'] {
-		--kit-toolbar-radius: 0;
-	}
-
-	.kit-toolbar[data-rounded='xs'] {
-		--kit-toolbar-radius: 2px;
-	}
-
-	.kit-toolbar[data-rounded='sm'] {
-		--kit-toolbar-radius: 4px;
-	}
-
-	.kit-toolbar[data-rounded='md'] {
-		--kit-toolbar-radius: 8px;
-	}
-
-	.kit-toolbar[data-rounded='lg'] {
-		--kit-toolbar-radius: 16px;
-	}
-
-	.kit-toolbar[data-rounded='xl'] {
-		--kit-toolbar-radius: 99999px;
-	}
-
-	.kit-toolbar[data-location='top'] {
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 1004;
-		width: 100%;
-		border-radius: 0;
-	}
-
-	.kit-toolbar[data-location='bottom'] {
-		position: fixed;
-		left: 0;
-		bottom: 0;
-		z-index: 1004;
-		width: 100%;
-		border-radius: 0;
-	}
 </style>

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

@@ -1,19 +1,18 @@
-import type { Component, PropValue, RoundedType } from '../../@types';
-type Variant = 'filled' | 'outline' | 'text' | 'dash';
-type Density = 'compact' | 'comfortable' | 'default';
+import type { Component, DensityType, ElevationProps, PropValue, RoundedType, SizeType } from '../../@types';
+type Variant = 'filled' | 'outline' | 'text';
 type Orientation = 'horizontal' | 'vertical';
-type Location = 'top' | 'bottom';
 export interface ToolbarProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'header' | 'nav';
     variant?: Variant | Record<string, Variant>;
-    rounded?: RoundedType | string;
-    density?: Density | Record<string, Density>;
+    rounded?: RoundedType | 'full';
+    density?: DensityType;
     color?: string;
     orientation?: Orientation | Record<string, Orientation>;
     background?: string;
-    location?: Location | Record<string, Location>;
     classContent?: string | string[] | undefined;
+    elevation?: ElevationProps;
+    size?: SizeType;
     [key: string]: PropValue | Record<string, PropValue> | unknown;
 }
 export {};

package/dist/components/tooltip/tooltip.svelte

@@ -12,7 +12,7 @@
 		open = $bindable(false),
 		forceMount = false,
 		label,
-		rounded,
+		rounded = 'xs',
 		color,
 		background,
 		location = 'bottom',
@@ -28,18 +28,6 @@
 		...rest
 	}: TooltipProps = $props();
 
-	let safeLocation = $derived(
-		location === 'top' || location === 'bottom' || location === 'left' || location === 'right'
-			? location
-			: 'bottom'
-	);
-	let safeDensity = $derived(
-		density === 'compact' || density === 'comfortable' || density === 'default'
-			? density
-			: 'default'
-	);
-	let safeVariant = $derived(variant === 'arrow' ? 'arrow' : undefined);
-
 	let { classProps, styleProps, restProps } = $derived(
 		makeComponentProps(rest as Record<string, unknown>)
 	);
@@ -68,16 +56,7 @@
 		})
 	);
 
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			background ? `--kit-tooltip-bg:${background}` : '',
-			color ? `--kit-tooltip-fg:${color}` : '',
-			typeof rounded === 'string' && rounded.includes('px') ? `--kit-tooltip-radius:${rounded}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 
 	const positioner = getPositionsTooltip();
 
@@ -100,7 +79,7 @@
 
 	const updatePosition = () => {
 		if (!triggerRef || !tooltipRef) return;
-		positioner.update(triggerRef, tooltipRef, safeLocation, true, avoidCollisions);
+		positioner.update(triggerRef, tooltipRef, location, true, avoidCollisions);
 		axis = positioner.values;
 	};
 
@@ -195,13 +174,15 @@
 		role="tooltip"
 		aria-label={label}
 		style={`transform: translate(${axis.x}px, ${axis.y}px); display:${open ? 'block' : 'none'}`}
+		style:--kit-tooltip-fg={color && `var(--kit-color-${color})`}
+		style:--kit-tooltip-bg={background && `var(--kit-color-${background})`}
 	>
 		<div
 			class={componentClass}
 			style={mergedStyle}
-			data-density={safeDensity}
-			data-location={axis.location ?? safeLocation}
-			data-variant={safeVariant}
+			data-density={density}
+			data-location={axis.location ?? location}
+			data-variant={variant}
 			data-rounded={rounded}
 			{...restProps}
 		>
@@ -224,7 +205,7 @@
 	}
 
 	.kit-tooltip-trigger:focus-visible {
-		outline: 2px solid var(--kit-focus);
+		outline: 2px solid var(--kit-color-focus);
 		outline-offset: 2px;
 	}
 
@@ -237,10 +218,8 @@
 	}
 
 	.kit-tooltip__content {
-		--kit-tooltip-bg: var(--kit-surface-3);
-		--kit-tooltip-fg: var(--kit-fg);
-		--kit-tooltip-radius: 8px;
-		--kit-tooltip-bd: color-mix(in oklab, var(--kit-tooltip-bg), black 8%);
+		--kit-tooltip-bg: var(--kit-color-surface-2);
+		--kit-tooltip-fg: var(--kit-color-text);
 		--kit-tooltip-py: 0.15rem;
 		--kit-tooltip-px: 0.625rem;
 
@@ -248,8 +227,9 @@
 		display: inline-block;
 		width: max-content;
 		max-width: min(20rem, calc(100vw - 1rem));
-		padding: var(--kit-tooltip-py) var(--kit-tooltip-px);
-		border: 1px solid var(--kit-tooltip-bd);
+		padding: calc(var(--kit-tooltip-py) * var(--kit-tooltip-density-scale))
+			calc(var(--kit-tooltip-px) * var(--kit-tooltip-density-scale));
+		border: 0;
 		border-radius: var(--kit-tooltip-radius);
 		background: var(--kit-tooltip-bg);
 		color: var(--kit-tooltip-fg);
@@ -259,33 +239,47 @@
 		animation: kit-tooltip-enter 150ms ease;
 	}
 
+	/** 
+	 * density
+	 * @link no links
+	 */
+	.kit-tooltip__content[data-density='none'] {
+		--kit-tooltip-density-scale: 0;
+	}
 	.kit-tooltip__content[data-density='compact'] {
-		--kit-tooltip-py: 0.125rem;
-		--kit-tooltip-px: 0.5rem;
+		--kit-tooltip-density-scale: 0.9;
+	}
+	.kit-tooltip__content[data-density='default'] {
+		--kit-tooltip-density-scale: 1;
 	}
-
 	.kit-tooltip__content[data-density='comfortable'] {
-		--kit-tooltip-py: 0.35rem;
-		--kit-tooltip-px: 0.75rem;
+		--kit-tooltip-density-scale: 1.1;
 	}
 
+	/** 
+	 * rounded
+	 * @link ...
+	 */
 	.kit-tooltip__content[data-rounded='0'] {
-		--kit-tooltip-radius: 0;
+		--kit-tooltip-radius: var(--kit-shape-none);
 	}
 	.kit-tooltip__content[data-rounded='xs'] {
-		--kit-tooltip-radius: 2px;
+		--kit-tooltip-radius: var(--kit-shape-xs);
 	}
 	.kit-tooltip__content[data-rounded='sm'] {
-		--kit-tooltip-radius: 4px;
+		--kit-tooltip-radius: var(--kit-shape-sm);
 	}
 	.kit-tooltip__content[data-rounded='md'] {
-		--kit-tooltip-radius: 8px;
+		--kit-tooltip-radius: var(--kit-shape-md);
 	}
 	.kit-tooltip__content[data-rounded='lg'] {
-		--kit-tooltip-radius: 16px;
+		--kit-tooltip-radius: var(--kit-shape-lg);
 	}
 	.kit-tooltip__content[data-rounded='xl'] {
-		--kit-tooltip-radius: 99999px;
+		--kit-tooltip-radius: var(--kit-shape-xl);
+	}
+	.kit-tooltip__content[data-rounded='full'] {
+		--kit-tooltip-radius: var(--kit-shape-full);
 	}
 
 	.kit-tooltip__content[data-variant='arrow']::after {

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

@@ -1,17 +1,17 @@
-import type { Component, PropValue, RoundedType } from '../../@types';
+import type { Component, DensityType, PropValue, RoundedType } from '../../@types';
 import type { Snippet } from 'svelte';
 export interface TooltipProps extends Component {
     ref?: HTMLElement | null;
     open?: boolean;
     forceMount?: boolean;
-    rounded?: RoundedType | string;
+    rounded?: RoundedType | 'full';
     label?: string;
     location?: 'top' | 'bottom' | 'left' | 'right';
     color?: string;
     background?: string;
     delayDuration?: number;
     variant?: 'arrow';
-    density?: 'compact' | 'comfortable' | 'default';
+    density?: DensityType;
     disabled?: boolean;
     avoidCollisions?: boolean;
     tooltip?: Snippet;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.6.3",
+	"version": "0.6.4",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"