lapikit 0.6.3 → 0.6.4

package/dist/components/accordion/accordion.svelte

@@ -6,17 +6,20 @@
 	let {
 		ref = $bindable(),
 		is = 'div',
-		children = undefined,
+		children,
 		class: className = '',
 		style: styleAttr = '',
 		's-class': sClass,
 		's-style': sStyle,
-		text = undefined,
-		color = undefined,
-		background = undefined,
-		rounded = undefined,
-		spacer = false,
-		hideIcon = false,
+		size = 'md',
+		variant = 'filled',
+		density = 'default',
+		rounded = 'md',
+		text,
+		color,
+		background,
+		spacer,
+		hideIcon,
 		...rest
 	}: AccordionProps = $props();
 
@@ -40,39 +43,29 @@
 			styleProps
 		})
 	);
-
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-accordion-fg:${color}` : '',
-			background ? `--kit-accordion-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
 	class={componentClass}
-	style={mergedStyle}
-	{...restProps}
+	style={componentStyle}
 	data-text={text ? true : undefined}
 	data-spacer={spacer}
 	data-hide-icon={hideIcon}
+	data-size={size}
+	data-variant={variant}
+	data-density={density}
 	data-rounded={rounded}
+	style:--kit-accordion-item-fg={color && `var(--kit-color-${color})`}
+	style:--kit-accordion-item-bg={background && `var(--kit-color-${background})`}
+	{...restProps}
 >
 	{@render children?.()}
 </svelte:element>
 
 <style>
 	.kit-accordion {
-		--kit-accordion-radius: 8px;
-		--kit-accordion-gap: 0;
-		--kit-accordion-fg: var(--kit-fg);
-		--kit-accordion-bg: transparent;
-
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: center;
@@ -80,41 +73,178 @@
 		padding: 0;
 		list-style: none;
 		position: relative;
-		z-index: 1;
-		gap: var(--kit-accordion-gap);
-		color: var(--kit-accordion-fg);
-		background: var(--kit-accordion-bg);
+		gap: var(--kit-accordion-gap, 0);
+		border: 0;
+		box-sizing: border-box;
+		transition:
+			background 140ms ease,
+			color 140ms ease,
+			box-shadow 140ms ease,
+			translate 140ms ease;
 	}
 
 	.kit-accordion[data-spacer='true'] {
-		--kit-accordion-gap: 1rem;
+		--kit-accordion-gap: 0.5rem;
 	}
 
-	.kit-accordion[data-rounded='0'] {
-		--kit-accordion-radius: 0;
+	.kit-accordion[data-spacer='true'] :global(.kit-accordion-item) {
+		border-radius: var(--kit-accordion-item-radius);
 	}
 
-	.kit-accordion[data-rounded='xs'] {
-		--kit-accordion-radius: 2px;
+	.kit-accordion:not([data-spacer='true']) :global(.kit-accordion-item:first-child) {
+		border-top-left-radius: var(--kit-accordion-item-radius);
+		border-top-right-radius: var(--kit-accordion-item-radius);
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
 	}
 
-	.kit-accordion[data-rounded='sm'] {
-		--kit-accordion-radius: 4px;
+	.kit-accordion:not([data-spacer='true']) :global(.kit-accordion-item) {
+		border-radius: 0;
 	}
 
-	.kit-accordion[data-rounded='md'] {
-		--kit-accordion-radius: 8px;
+	.kit-accordion:not([data-spacer='true']) :global(.kit-accordion-item:last-child) {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		border-bottom-left-radius: var(--kit-accordion-item-radius);
+		border-bottom-right-radius: var(--kit-accordion-item-radius);
 	}
 
-	.kit-accordion[data-rounded='lg'] {
-		--kit-accordion-radius: 16px;
+	.kit-accordion[data-hide-icon='true'] :global(.kit-accordion-item__indicator) {
+		display: none;
 	}
 
-	.kit-accordion[data-rounded='xl'] {
-		--kit-accordion-radius: 99999px;
+	/** 
+	 * rounded
+	 * @link ...
+	 */
+	.kit-accordion[data-rounded='0'] :global(.kit-accordion-item) {
+		--kit-accordion-item-radius: var(--kit-shape-none);
+	}
+	.kit-accordion[data-rounded='xs'] :global(.kit-accordion-item) {
+		--kit-accordion-item-radius: var(--kit-shape-xs);
+	}
+	.kit-accordion[data-rounded='sm'] :global(.kit-accordion-item) {
+		--kit-accordion-item-radius: var(--kit-shape-sm);
+	}
+	.kit-accordion[data-rounded='md'] :global(.kit-accordion-item) {
+		--kit-accordion-item-radius: var(--kit-shape-md);
+	}
+	.kit-accordion[data-rounded='lg'] :global(.kit-accordion-item) {
+		--kit-accordion-item-radius: var(--kit-shape-lg);
+	}
+	.kit-accordion[data-rounded='xl'] :global(.kit-accordion-item) {
+		--kit-accordion-item-radius: var(--kit-shape-xl);
+	}
+	.kit-accordion[data-rounded='full'] :global(.kit-accordion-item) {
+		--kit-accordion-item-radius: var(--kit-shape-full);
 	}
 
-	.kit-accordion[data-hide-icon='true'] :global(.kit-accordion-item__indicator) {
+	/** 
+	 * density
+	 * @link no links
+	 */
+	.kit-accordion[data-density='none'] {
+		--kit-accordion-density-scale: 0;
+		--kit-accordion-density-h-scale: 0;
+	}
+	.kit-accordion[data-density='compact'] {
+		--kit-accordion-density-scale: 0.9;
+		--kit-accordion-density-h-scale: 0.92;
+	}
+	.kit-accordion[data-density='default'] {
+		--kit-accordion-density-scale: 1;
+		--kit-accordion-density-h-scale: 1;
+	}
+	.kit-accordion[data-density='comfortable'] {
+		--kit-accordion-density-scale: 1.1;
+		--kit-accordion-density-h-scale: 1.15;
+	}
+
+	/** 
+	 * variant
+	 * @link no links...
+	 */
+	.kit-accordion[data-variant='filled'] :global(.kit-accordion-item) {
+		--kit-accordion-item-bg: var(--kit-color-surface-1);
+		--kit-accordion-item-fg: var(--kit-color-text);
+
+		--kit-accordion-item-hover-bg: color-mix(in oklab, var(--kit-accordion-item-bg), black 10%);
+		--kit-accordion-item-active-bg: color-mix(in oklab, var(--kit-accordion-item-bg), black 16%);
+	}
+	.kit-accordion[data-variant='outline'] :global(.kit-accordion-item) {
+		--kit-accordion-item-bg: transparent;
+		--kit-accordion-item-fg: var(--kit-color-text);
+		--kit-accordion-item-bd: var(--kit-accordion-item-fg);
+
+		--kit-accordion-item-hover-bg: color-mix(
+			in oklab,
+			var(--kit-accordion-item-fg),
+			transparent 80%
+		);
+		--kit-accordion-item-active-bg: color-mix(
+			in oklab,
+			var(--kit-accordion-item-fg),
+			transparent 92%
+		);
+	}
+	.kit-accordion[data-variant='text'] :global(.kit-accordion-item) {
+		--kit-accordion-item-bg: transparent;
+		--kit-accordion-item-fg: var(--kit-color-text);
+
+		--kit-accordion-item-hover-bg: color-mix(
+			in oklab,
+			var(--kit-accordion-item-fg),
+			transparent 80%
+		);
+		--kit-accordion-item-active-bg: color-mix(
+			in oklab,
+			var(--kit-accordion-item-fg),
+			transparent 92%
+		);
+	}
+
+	.kit-accordion[data-variant='text'] :global(.kit-accordion-item .outline),
+	.kit-accordion[data-variant='filled'] :global(.kit-accordion-item .outline) {
+		display: none;
+	}
+
+	.kit-accordion[data-variant='filled']
+		:global(.kit-accordion-item .kit-accordion-item__separator) {
 		display: none;
 	}
+
+	/**
+	* size
+	* @link nothing...
+	*/
+	.kit-accordion[data-size='xs'] :global(.kit-accordion-item) {
+		--kit-accordion-item-h: 28px;
+		--kit-accordion-item-px: 10px;
+		--kit-accordion-item-gap: 4px;
+		--kit-accordion-item-font: 0.75rem;
+	}
+	.kit-accordion[data-size='sm'] :global(.kit-accordion-item) {
+		--kit-accordion-item-h: 32px;
+		--kit-accordion-item-px: 12px;
+		--kit-accordion-item-gap: 6px;
+		--kit-accordion-item-font: 0.875rem;
+	}
+	.kit-accordion[data-size='md'] :global(.kit-accordion-item) {
+		--kit-accordion-item-h: 40px;
+		--kit-accordion-item-px: 16px;
+		--kit-accordion-item-gap: 8px;
+		--kit-accordion-item-font: 1rem;
+	}
+	.kit-accordion[data-size='lg'] :global(.kit-accordion-item) {
+		--kit-accordion-item-h: 48px;
+		--kit-accordion-item-px: 20px;
+		--kit-accordion-item-gap: 10px;
+		--kit-accordion-item-font: 1.125rem;
+	}
+	.kit-accordion[data-size='xl'] :global(.kit-accordion-item) {
+		--kit-accordion-item-h: 56px;
+		--kit-accordion-item-px: 24px;
+		--kit-accordion-item-gap: 12px;
+		--kit-accordion-item-font: 1.25rem;
+	}
 </style>

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

@@ -1,5 +1,6 @@
-import type { RoundedType, Component } from '../../@types';
+import type { RoundedType, Component, SizeType, DensityType, ElevationProps } from '../../@types';
 import type { Snippet } from 'svelte';
+type AccordionVariant = 'filled' | 'outline' | 'text';
 export type ModelAccordionItemProps = {
     open: boolean;
 };
@@ -9,7 +10,10 @@ export interface AccordionProps extends Component {
     text?: string;
     color?: string;
     background?: string;
-    rounded?: RoundedType;
+    rounded?: RoundedType | 'full';
+    size?: SizeType;
+    variant?: AccordionVariant;
+    density?: DensityType;
     spacer?: boolean;
     hideIcon?: boolean;
 }
@@ -21,7 +25,6 @@ export interface AccordionItemProps extends Component {
     is?: 'div';
     index: number | string;
     text?: string;
-    rounded?: RoundedType;
     color?: string;
     background?: string;
     readOnly?: boolean;
@@ -30,4 +33,6 @@ export interface AccordionItemProps extends Component {
     toggle?: (index: number | string) => void;
     indicator?: Snippet<[AccordionItemModelProps]>;
     activator?: Snippet;
+    elevation?: ElevationProps;
 }
+export {};

package/dist/components/accordion/modules/accordion-item.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
-	import { useClassName, useStyles } from '../../../utils';
+	import { useClassName, useElevation, useStyles } from '../../../utils';
 	import { makeComponentProps } from '../../../html-mapped';
 	import type { AccordionItemModelProps, AccordionItemProps } from '../accordion.types.js';
 
 	let {
 		ref = $bindable(),
 		is = 'div',
-		children = undefined,
+		children,
 		class: className = '',
 		style: styleAttr = '',
 		's-class': sClass,
 		's-style': sStyle,
-		activator = undefined,
-		indicator = undefined,
-		text = undefined,
-		rounded = undefined,
-		color = undefined,
-		background = undefined,
+		activator,
+		indicator,
+		text,
+		color,
+		background,
 		index,
-		open = false,
-		toggle = undefined,
+		open,
+		toggle,
 		disabled = false,
 		readOnly = false,
+		elevation,
 		...rest
 	}: AccordionItemProps = $props();
 
@@ -46,15 +46,7 @@
 		})
 	);
 
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-accordion-item-fg:${color}` : '',
-			background ? `--kit-accordion-item-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
+	let mergedStyle = $derived([componentStyle].filter(Boolean).join('; '));
 
 	let safeOpen = $derived(!!open);
 	let model: AccordionItemModelProps = {
@@ -63,6 +55,8 @@
 		}
 	};
 
+	let elevationState = $derived(useElevation(elevation));
+
 	function handleToggle() {
 		if (readOnly || disabled || !toggle) return;
 		toggle(index);
@@ -74,11 +68,18 @@
 	bind:this={ref}
 	class={componentClass}
 	style={mergedStyle}
-	{...restProps}
-	data-open={safeOpen}
 	data-disabled={disabled}
-	data-rounded={rounded}
+	data-read-only={readOnly}
+	data-active={safeOpen}
+	data-elevation={elevationState.base}
+	data-elevation-hover={elevationState.hover}
+	data-elevation-active={elevationState.active}
+	style:--kit-accordion-item-fg={color && `var(--kit-color-${color})`}
+	style:--kit-accordion-item-bg={background && `var(--kit-color-${background})`}
+	{...restProps}
 >
+	<span class="outline"></span>
+
 	<button
 		class="kit-accordion-item__trigger"
 		type="button"
@@ -110,6 +111,8 @@
 		</span>
 	</button>
 
+	<span class="kit-accordion-item__separator"></span>
+
 	<div class="kit-accordion-item__content" hidden={!safeOpen}>
 		<div class="kit-accordion-item__content-inner">
 			{@render children?.()}
@@ -118,62 +121,25 @@
 </svelte:element>
 
 <style>
-	button {
-		appearance: none;
-		background: none;
-		border: none;
-		font: inherit;
-		color: inherit;
-	}
-
 	.kit-accordion-item {
-		--kit-accordion-item-radius: var(--kit-accordion-radius, 8px);
-		--kit-accordion-item-fg: var(--kit-accordion-fg, var(--kit-fg));
-		--kit-accordion-item-bg: var(--kit-surface-2);
-		--kit-accordion-item-bd: color-mix(in oklab, var(--kit-accordion-item-bg), var(--kit-fg) 12%);
-		--kit-accordion-item-trigger-y: 1rem;
-		--kit-accordion-item-trigger-x: 1.25rem;
-
 		flex: 1 0 100%;
 		max-width: 100%;
 		position: relative;
-		border-radius: var(--kit-accordion-item-radius);
+		border: 0;
+		box-sizing: border-box;
 		background: var(--kit-accordion-item-bg);
 		color: var(--kit-accordion-item-fg);
-		border: 1px solid var(--kit-accordion-item-bd);
-		transition:
-			border-color 150ms ease,
-			background 150ms ease,
-			box-shadow 150ms ease;
+		gap: var(--kit-accordion-item-gap);
+		text-decoration: none;
+		font-size: var(--kit-accordion-item-font);
 		overflow: clip;
 	}
 
-	.kit-accordion-item[data-rounded='0'] {
-		--kit-accordion-item-radius: 0;
-	}
-
-	.kit-accordion-item[data-rounded='xs'] {
-		--kit-accordion-item-radius: 2px;
-	}
-
-	.kit-accordion-item[data-rounded='sm'] {
-		--kit-accordion-item-radius: 4px;
-	}
-
-	.kit-accordion-item[data-rounded='md'] {
-		--kit-accordion-item-radius: 8px;
-	}
-
-	.kit-accordion-item[data-rounded='lg'] {
-		--kit-accordion-item-radius: 16px;
-	}
-
-	.kit-accordion-item[data-rounded='xl'] {
-		--kit-accordion-item-radius: 99999px;
-	}
-
-	.kit-accordion-item[data-open='true'] {
-		box-shadow: 0 10px 28px color-mix(in oklab, var(--kit-fg), transparent 90%);
+	.kit-accordion-item > button {
+		appearance: none;
+		border: 0;
+		font: inherit;
+		text-align: inherit;
 	}
 
 	.kit-accordion-item__trigger {
@@ -181,10 +147,13 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: 1rem;
-		padding: var(--kit-accordion-item-trigger-y) var(--kit-accordion-item-trigger-x);
+		gap: var(--kit-accordion-item-gap);
+		min-height: calc(var(--kit-accordion-item-h) * var(--kit-accordion-density-h-scale));
+		padding: calc(var(--kit-accordion-item-px) * var(--kit-accordion-density-scale));
 		cursor: pointer;
 		text-align: left;
+		background: var(--kit-accordion-item-bg);
+		color: var(--kit-accordion-item-fg);
 	}
 
 	.kit-accordion-item__trigger:disabled,
@@ -220,6 +189,36 @@
 	}
 
 	.kit-accordion-item__content-inner {
-		padding: 0 1.25rem 1rem;
+		padding: calc(var(--kit-accordion-item-px) * var(--kit-accordion-density-scale));
+	}
+
+	.kit-accordion-item__separator {
+		width: 96%;
+		height: 1px;
+		display: block;
+		position: relative;
+		background: var(--kit-accordion-item-fg);
+		margin: 0 auto;
+	}
+
+	.kit-accordion-item[data-read-only='false'][data-disabled='false'] > button:hover {
+		background: var(--kit-accordion-item-hover-bg);
+	}
+
+	/**I think is a good idea for not use this*/
+	/* .kit-accordion-item[data-active='true'][data-disabled='false'][data-read-only='false'] > button {
+		background: var(--kit-accordion-item-active-bg);
+	}
+	.kit-accordion-item[data-disabled='false'][data-read-only='false'] > button:active {
+		background: var(--kit-accordion-item-active-bg);
+	} */
+
+	.kit-accordion-item[data-disabled='false'][data-read-only='false'] > button:focus-visible {
+		outline: 2px solid var(--kit-focus);
+		outline-offset: 2px;
+	}
+
+	.kit-accordion-item .outline {
+		--outline-color: var(--kit-accordion-item-bd);
 	}
 </style>