lapikit 0.6.2 → 0.6.4

package/dist/components/popover/popover.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useClassName, useStyles, clickOutside } from '../../utils';
+	import { useClassName, useStyles, clickOutside, useElevation } from '../../utils';
 	import { makeComponentProps } from '../../html-mapped';
 	import { getPositions } from './popover.svelte.js';
 	import type { ModelPopoverProps, PopoverProps } from './popover.types.js';
@@ -9,7 +9,7 @@
 		open = $bindable(false),
 		children,
 		activator,
-		rounded,
+		rounded = 'md',
 		position = 'bottom',
 		color,
 		background,
@@ -17,19 +17,17 @@
 		style: styleAttr = '',
 		's-class': sClass,
 		's-style': sStyle,
+		elevation = '2',
+		density = 'default',
 		...rest
 	}: PopoverProps = $props();
 
-	let safePosition = $derived(
-		position === 'top' || position === 'bottom' || position === 'left' || position === 'right'
-			? position
-			: 'bottom'
-	);
-
 	let { classProps, styleProps, restProps } = $derived(
 		makeComponentProps(rest as Record<string, unknown>)
 	);
 
+	let elevationState = $derived(useElevation(elevation));
+
 	let componentClass = $derived(
 		useClassName({
 			baseClass: 'kit-popover-content',
@@ -47,16 +45,7 @@
 		})
 	);
 
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			background ? `--kit-popover-bg:${background}` : '',
-			color ? `--kit-popover-fg:${color}` : '',
-			typeof rounded === 'string' && rounded.includes('px') ? `--kit-popover-radius:${rounded}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 
 	const positioner = getPositions();
 
@@ -80,7 +69,7 @@
 
 	const updatePosition = () => {
 		if (!contentRef || !activatorRef) return;
-		positioner.update(activatorRef, contentRef, safePosition, false, true);
+		positioner.update(activatorRef, contentRef, position, false, true);
 		axis = positioner.values;
 	};
 
@@ -121,7 +110,13 @@
 		style={`left:${axis.x}px; top:${axis.y}px; ${mergedStyle}`}
 		role="dialog"
 		data-rounded={rounded}
-		data-position={axis.location ?? safePosition}
+		data-position={axis.location ?? position}
+		data-density={density}
+		data-elevation={elevationState.base}
+		data-elevation-hover={elevationState.hover}
+		data-elevation-active={elevationState.active}
+		style:--kit-modal-fg={color && `var(--kit-color-${color})`}
+		style:--kit-modal-bg={background && `var(--kit-color-${background})`}
 		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: () => (open = false) }}
 		{...restProps}
 	>
@@ -131,43 +126,60 @@
 
 <style>
 	.kit-popover-content {
-		--kit-popover-bg: var(--kit-surface-1);
-		--kit-popover-fg: var(--kit-fg);
-		--kit-popover-radius: 12px;
-		--kit-popover-bd: color-mix(in oklab, var(--kit-fg), transparent 88%);
-		--kit-popover-shadow: 0 18px 40px -18px color-mix(in oklab, black 24%, transparent);
+		--kit-popover-bg: var(--kit-color-surface-3);
+		--kit-popover-fg: var(--kit-color-text);
 
 		position: fixed;
 		z-index: 1900;
 		display: inline-block;
 		width: auto;
 		max-width: min(28rem, calc(100vw - 1rem));
-		padding: 1rem;
-		border: 1px solid var(--kit-popover-bd);
+		padding: calc(1rem * var(--kit-popover-density-scale));
+		border: 0;
 		border-radius: var(--kit-popover-radius);
 		background: var(--kit-popover-bg);
 		color: var(--kit-popover-fg);
-		box-shadow: var(--kit-popover-shadow);
 		opacity: 1;
 		transition: opacity 140ms ease;
 	}
 
+	/** 
+	 * rounded
+	 * @link ...
+	 */
 	.kit-popover-content[data-rounded='0'] {
-		--kit-popover-radius: 0;
+		--kit-popover-radius: var(--kit-shape-none);
 	}
 	.kit-popover-content[data-rounded='xs'] {
-		--kit-popover-radius: 2px;
+		--kit-popover-radius: var(--kit-shape-xs);
 	}
 	.kit-popover-content[data-rounded='sm'] {
-		--kit-popover-radius: 4px;
+		--kit-popover-radius: var(--kit-shape-sm);
 	}
 	.kit-popover-content[data-rounded='md'] {
-		--kit-popover-radius: 8px;
+		--kit-popover-radius: var(--kit-shape-md);
 	}
 	.kit-popover-content[data-rounded='lg'] {
-		--kit-popover-radius: 16px;
+		--kit-popover-radius: var(--kit-shape-lg);
 	}
 	.kit-popover-content[data-rounded='xl'] {
-		--kit-popover-radius: 99999px;
+		--kit-popover-radius: var(--kit-shape-xl);
+	}
+
+	/** 
+	 * density
+	 * @link no url
+	 */
+	.kit-popover-content[data-density='none'] {
+		--kit-popover-density-scale: 0;
+	}
+	.kit-popover-content[data-density='compact'] {
+		--kit-popover-density-scale: 0.8;
+	}
+	.kit-popover-content[data-density='default'] {
+		--kit-popover-density-scale: 1;
+	}
+	.kit-popover-content[data-density='comfortable'] {
+		--kit-popover-density-scale: 1.15;
 	}
 </style>

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

@@ -1,4 +1,4 @@
-import type { Component, PropValue, RoundedType } from '../../@types';
+import type { Component, DensityType, ElevationProps, PropValue, RoundedType } from '../../@types';
 import type { Snippet } from 'svelte';
 export type PositionElement = {
     x: number;
@@ -16,5 +16,7 @@ export interface PopoverProps extends Component {
     color?: string;
     background?: string;
     activator?: Snippet<[ModelPopoverProps]>;
+    elevation?: ElevationProps;
+    density?: DensityType;
     [key: string]: PropValue | Record<string, PropValue> | unknown;
 }

package/dist/components/separator/separator.svelte

@@ -7,9 +7,8 @@
 		ref = $bindable(),
 		is = 'hr',
 		inset = false,
-		thickness,
+		thickness = 'thin',
 		orientation = 'horizontal',
-		opacity,
 		color,
 		class: className = '',
 		style: styleAttr = '',
@@ -18,12 +17,6 @@
 		...rest
 	}: SeparatorProps = $props();
 
-	let safeOrientation = $derived(
-		typeof orientation === 'string' && (orientation === 'horizontal' || orientation === 'vertical')
-			? orientation
-			: 'horizontal'
-	);
-
 	let { classProps, styleProps, restProps } = $derived(
 		makeComponentProps(rest as Record<string, unknown>)
 	);
@@ -45,21 +38,10 @@
 		})
 	);
 
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-separator-color:${color}` : '',
-			opacity !== undefined ? `--kit-separator-opacity:${opacity}` : '',
-			thickness !== undefined && safeOrientation === 'horizontal'
-				? `--kit-separator-top-width:${typeof thickness === 'number' ? `${thickness}px` : thickness}`
-				: '',
-			thickness !== undefined && safeOrientation === 'vertical'
-				? `--kit-separator-right-width:${typeof thickness === 'number' ? `${thickness}px` : thickness}`
-				: ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	const formatThickness = (value?: number | string) =>
+		typeof thickness === 'number' ? `${value}px` : value;
+
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 </script>
 
 <svelte:element
@@ -69,24 +51,23 @@
 	class={componentClass}
 	style={mergedStyle}
 	role="separator"
-	aria-orientation={safeOrientation}
+	aria-orientation={orientation || 'horizontal'}
 	data-inset={inset || undefined}
-	data-orientation={safeOrientation}
+	data-orientation={orientation}
+	style:--kit-separator-color={color && `var(--kit-color-${color})`}
+	style:--kit-separator-top-width={orientation === 'horizontal' ? formatThickness(thickness) : ''}
+	style:--kit-separator-right-width={orientation === 'vertical' ? formatThickness(thickness) : ''}
 />
 
 <style>
 	.kit-separator {
-		--kit-separator-color: var(--kit-fg);
-		--kit-separator-opacity: 0.12;
-		--kit-separator-top-width: thin;
-		--kit-separator-right-width: thin;
+		--kit-separator-color: var(--kit-color-border);
 		--kit-separator-vertical-min-size: 1.5rem;
 
 		display: block;
 		flex: 1 1 100%;
 		height: 0;
 		max-height: 0;
-		opacity: var(--kit-separator-opacity);
 		border-color: var(--kit-separator-color);
 		border-style: solid;
 		transition: inherit;

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

@@ -5,8 +5,7 @@ export interface SeparatorProps extends Base {
     is?: 'div' | 'hr';
     inset?: boolean;
     thickness?: string | number;
-    opacity?: string | number;
     color?: string;
-    orientation?: Orientation | Record<string, Orientation>;
+    orientation?: Orientation;
 }
 export {};