lapikit 0.0.0-insiders.d9491fb → 0.0.0-insiders.db064a9

package/dist/components/chip/chip.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/index.js';
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
 	import { Icon } from '../index.js';
 	import type { ChipProps } from './types.js';
 
 	// external
 	import LoadingFill from '../../assets/icons/loading-fill.svelte';
 	import Close from '../../assets/icons/close-fill.svelte';
+	import { ripple } from '../../internal/core/animations/ripple.js';
 
 	let {
 		children,
@@ -20,7 +21,7 @@
 		dark,
 		light,
 		active,
-		variant,
+		variant = 'filled',
 		error,
 		info,
 		success,
@@ -35,10 +36,17 @@
 		loading,
 		rounded,
 		closable,
+		noRipple,
+		readonly = false,
 		...rest
 	}: ChipProps = $props();
 
 	const assets = getAssets();
+
+	$effect(() => {
+		const refProps = { ...rest };
+		if (refProps?.onclick && !readonly) is = 'button';
+	});
 </script>
 
 {#if !closable || (open && closable)}
@@ -61,6 +69,7 @@
 			disabled && 'kit-chip--disabled',
 			active && 'kit-chip--active',
 			loading && 'kit-chip--loading',
+			readonly && 'kit-chip--readonly',
 			rest.class
 		]}
 		tabindex={href && disabled ? -1 : 0}
@@ -68,9 +77,13 @@
 		aria-label={type !== 'button' ? label : undefined}
 		disabled={href ? undefined : disabled}
 		type={href ? undefined : type}
-		style:--base={assets.color(background)}
-		style:--on={assets.color(color)}
-		style:--shape={assets.shape(rounded)}
+		use:ripple={{
+			component: 'chip',
+			disabled: noRipple || readonly || disabled || is === 'div' || is === 'span'
+		}}
+		style:--chip-background={assets.color(background)}
+		style:--chip-color={assets.color(color)}
+		style:--chip-shape={assets.shape(rounded)}
 	>
 		{#if loading}
 			<div class="kit-chip-loading">
@@ -85,20 +98,20 @@
 		{/if}
 
 		{#if prepend}
-			<span class="kit-chip-prepend">
+			<div class="kit-chip-prepend">
 				{@render prepend?.()}
-			</span>
+			</div>
 		{/if}
-		<span class="kit-chip-content">
+		<div class="kit-chip-content">
 			{@render children?.()}
-		</span>
+		</div>
 		{#if append}
-			<span class="kit-chip-append">
+			<div class="kit-chip-append">
 				{@render append?.()}
-			</span>
+			</div>
 		{/if}
 
-		{#if closable}
+		{#if closable && !readonly}
 			<button
 				class="kit-chip--close"
 				type="button"

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

@@ -1,4 +1,4 @@
-import type { Component } from '../../internal/types.js';
+import type { Component } from '../../internal/types/index.js';
 import type { Snippet } from 'svelte';
 export interface ChipProps extends Component {
     load?: Snippet;
@@ -10,7 +10,7 @@ export interface ChipProps extends Component {
     dark?: boolean;
     light?: boolean;
     href?: string;
-    variant?: 'outline';
+    variant?: 'outline' | 'filled';
     density?: 'compact' | 'comfortable' | 'default';
     active?: boolean;
     loading?: boolean;
@@ -27,4 +27,6 @@ export interface ChipProps extends Component {
     type?: 'button';
     label?: string;
     closable?: boolean;
+    noRipple?: boolean;
+    readonly?: boolean;
 }

package/dist/components/dialog/dialog.css

@@ -15,7 +15,7 @@
 }
 
 .kit-dialog::backdrop {
-	background-color: color-mix(in oklab, var(--kit-shadow) 30%, transparent);
+	background-color: color-mix(in oklab, var(--kit-state-shadow) 30%, transparent);
 	animation: fade 0.2s ease-out;
 }
 .kit-dialog[open]::backdrop {
@@ -23,23 +23,17 @@
 }
 
 .kit-dialog .kit-dialog-container {
-	--dialog-color: var(--on, var(--kit-on-neutral));
-	--dialog-background: var(--base, var(--kit-neutral));
-	--dialog-radius: var(--shape, var(--kit-radius-md));
-
-	border-radius: var(--dialog-radius);
-	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-	transition-duration: 0.2s;
+	border-radius: var(--dialog-shape, var(--system-shape-md));
 	padding-top: var(--dialog-spacing-x);
 	padding-bottom: var(--dialog-spacing-x);
 	padding-right: var(--dialog-spacing-y);
 	padding-left: var(--dialog-spacing-y);
-
-	/* theme */
-	color: var(--dialog-color);
-	background-color: var(--dialog-background);
-	border-color: var(--dialog-background);
+	color: var(--dialog-color, var(--kit-label-primary));
+	background-color: var(--dialog-background, var(--kit-background-grouped-primary));
+	border-color: var(--dialog-background, var(--kit-background-grouped-primary));
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+	transition-duration: 0.2s;
 }
 
 .kit-dialog .close-dialog {
@@ -60,30 +54,31 @@
 }
 
 .kit-dialog[breakpoint]kit-dialog--position-center {
-	margin: auto;
+	margin-top: auto;
+	margin-bottom: auto;
 }
 
 .kit-dialog[breakpoint]kit-dialog--size-xs {
-	max-width: var(--kit-dialog-size-xs);
+	max-width: var(--system-dialog-xs);
 }
 
 .kit-dialog[breakpoint]kit-dialog--size-sm {
-	max-width: var(--kit-dialog-size-sm);
+	max-width: var(--system-dialog-sm);
 	height: fit-content;
 }
 
 .kit-dialog[breakpoint]kit-dialog--size-md {
-	max-width: var(--kit-dialog-size-md);
+	max-width: var(--system-dialog-md);
 	height: fit-content;
 }
 
 .kit-dialog[breakpoint]kit-dialog--size-lg {
-	max-width: var(--kit-dialog-size-lg);
+	max-width: var(--system-dialog-lg);
 	height: fit-content;
 }
 
 .kit-dialog[breakpoint]kit-dialog--size-xl {
-	max-width: var(--kit-dialog-size-xl);
+	max-width: var(--system-dialog-xl);
 	height: fit-content;
 }
 

package/dist/components/dialog/dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { disabledScroll } from '../../internal/index.js';
-	import { getAssets } from '../../internal/index.js';
+	import { disabledScroll } from '../../internal/helpers/scroll.js';
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
 	import type { DialogProps } from './types.js';
 
 	let {
@@ -58,9 +58,9 @@
 			rest.class
 		]}
 		onclick={(event: MouseEvent) => event.stopPropagation()}
-		style:--base={assets.color(background)}
-		style:--on={assets.color(color)}
-		style:--shape={assets.shape(rounded)}
+		style:--dialog-background={assets.color(background)}
+		style:--dialog-color={assets.color(color)}
+		style:--dialog-shape={assets.shape(rounded)}
 	>
 		{@render children?.()}
 	</div>

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

@@ -1,4 +1,4 @@
-import type { Component } from '../../internal/types.js';
+import type { Component } from '../../internal/types/index.js';
 type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type DialogPosition = 'bottom' | 'center' | 'top';
 type DialogDensity = 'compact' | 'comfortable' | 'default';

package/dist/components/dropdown/dropdown.css

@@ -1,8 +1,4 @@
 .kit-dropdown-content {
-	--dropdown-color: var(--on, var(--kit-on-neutral));
-	--dropdown-background: var(--base, var(--kit-neutral));
-	--dropdown-radius: var(--shape, var(--kit-radius-md));
-
 	inset: 0px auto auto 0px;
 	margin: 0px;
 	position: fixed;
@@ -11,12 +7,7 @@
 	width: auto;
 	opacity: 1;
 	transition-property: opacity, transform;
-	transition:
-		color 0.5s,
-		background-color 0.5s;
-
-	/* theme */
-	background-color: var(--dropdown-background);
-	color: var(--dropdown-color);
-	border-radius: var(--dropdown-radius);
+	background-color: var(--dropdown-background, var(--kit-background-grouped-primary));
+	color: var(--dropdown-color, var(--kit-label-primary));
+	border-radius: var(--dropdown-shape, var(--system-shape-md));
 }

package/dist/components/dropdown/dropdown.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/assets.svelte.js';
-	import { clickOutside } from '../../internal/clickOutside.js';
-	import { getPositions } from './dropdown.svelte.js';
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
+	import { clickOutside } from '../../internal/helpers/outside.js';
+	import { getPositions } from '../../internal/core/actions/dropdown.svelte.js';
 	import type { DropdownProps, ModelDropdownProps } from './types.js';
 
 	let {
@@ -55,7 +55,6 @@
 		state: 'open' | 'close',
 		element: HTMLElement | PointerEvent | null
 	) => {
-		console.log();
 		if (openOnHover && state === 'open') {
 			if (timeoutId) {
 				clearTimeout(timeoutId);
@@ -106,9 +105,9 @@
 			e.stopPropagation();
 			handleClose();
 		}}
-		style:--base={assets.color(background)}
-		style:--on={assets.color(color)}
-		style:--shape={assets.shape(rounded)}
+		style:--dropdown-background={assets.color(background)}
+		style:--dropdown-color={assets.color(color)}
+		style:--dropdown-shape={assets.shape(rounded)}
 		use:clickOutside={{ exclude: [ref, refActivator], onClose: () => (open = false) }}
 	>
 		{@render children?.()}

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

@@ -1,4 +1,4 @@
-import type { Component } from '../../internal/types.js';
+import type { Component } from '../../internal/types/index.js';
 import type { Snippet } from 'svelte';
 export type PositionElement = {
     x: number;

package/dist/components/icon/icon.css

@@ -1,62 +1,64 @@
 .kit-icon {
-	--icon-size: 1rem;
-	--icon-color: var(--base, var(--kit-on-neutral));
-
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	transition: color 0.5s;
 	text-indent: 0;
+	font-size: calc(
+		var(--icon-multiplier-parent-size, var(--icon-multiplier-size)) * var(--system-spacing)
+	);
 }
 
 .kit-icon:before {
-	font-size: calc(var(--icon-size-multiplier) * var(--icon-size));
-	color: var(--icon-color);
+	color: var(--icon-color-state, var(--icon-color, currentColor)) !important;
 }
 
 .kit-icon svg {
-	color: var(--icon-color);
+	color: var(--icon-color-state, var(--icon-color, currentColor)) !important;
 }
 
 .kit-icon svg,
 .kit-icon img {
-	width: calc(var(--icon-size-multiplier) * var(--icon-size));
-	height: calc(var(--icon-size-multiplier) * var(--icon-size));
+	width: calc(
+		var(--icon-multiplier-parent-size, var(--icon-multiplier-size)) * var(--system-spacing)
+	);
+	height: calc(
+		var(--icon-multiplier-parent-size, var(--icon-multiplier-size)) * var(--system-spacing)
+	);
 }
 
 /* size */
 .kit-icon[breakpoint]kit-icon--size-xs {
-	--icon-size-multiplier: 0.875;
+	--icon-multiplier-size: 7;
 }
 
 .kit-icon[breakpoint]kit-icon--size-sm {
-	--icon-size-multiplier: 1;
+	--icon-multiplier-size: 8;
 }
 
 .kit-icon[breakpoint]kit-icon--size-md {
-	--icon-size-multiplier: 1.125;
+	--icon-multiplier-size: 9;
 }
 
 .kit-icon[breakpoint]kit-icon--size-lg {
-	--icon-size-multiplier: 1.25;
+	--icon-multiplier-size: 10;
 }
 
 .kit-icon[breakpoint]kit-icon--size-xl {
-	--icon-size-multiplier: 1.5;
+	--icon-multiplier-size: 11;
 }
 
 /* state */
 .kit-icon.kit-icon--info {
-	--base: var(--kit-info);
+	--icon-color-state: var(--kit-accent-info);
 }
 .kit-icon.kit-icon--success {
-	--base: var(--kit-success);
+	--icon-color-state: var(--kit-accent-success);
 }
 .kit-icon.kit-icon--warning {
-	--base: var(--kit-warning);
+	--icon-color-state: var(--kit-accent-warning);
 }
 .kit-icon.kit-icon--error {
-	--base: var(--kit-error);
+	--icon-color-state: var(--kit-accent-destructive);
 }
 
 /* disabled */

package/dist/components/icon/icon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/assets.svelte.js';
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
 	import type { IconProps } from './types.js';
 	let {
 		children,
@@ -39,7 +39,7 @@
 		size && assets.className('icon', 'size', size),
 		rest.class
 	]}
-	style:--base={assets.color(color)}
+	style:--icon-color={assets.color(color)}
 >
 	{#if icon && icon.includes('/')}
 		<img src={icon} {alt} />

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

@@ -1,4 +1,4 @@
-import type { Component } from '../../internal/types.js';
+import type { Component } from '../../internal/types/index.js';
 export interface IconProps extends Component {
     ref?: HTMLElement | null;
     is?: 'i' | 'div';

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 export { default as App } from './app/app.svelte';
-export { default as Btn } from './button/button.svelte';
+export { default as Button } from './button/button.svelte';
 export { default as Icon } from './icon/icon.svelte';
 export { default as Dropdown } from './dropdown/dropdown.svelte';
 export { default as Popover } from './popover/popover.svelte';
@@ -19,3 +19,4 @@ export { default as Card } from './card/card.svelte';
 export { default as Toolbar } from './toolbar/toolbar.svelte';
 export { default as Appbar } from './appbar/appbar.svelte';
 export { default as Spacer } from './spacer/spacer.svelte';
+export { default as Textfield } from './textfield/textfield.svelte';

package/dist/components/index.js

@@ -1,6 +1,6 @@
 // components
 export { default as App } from './app/app.svelte';
-export { default as Btn } from './button/button.svelte';
+export { default as Button } from './button/button.svelte';
 export { default as Icon } from './icon/icon.svelte';
 export { default as Dropdown } from './dropdown/dropdown.svelte';
 export { default as Popover } from './popover/popover.svelte';
@@ -20,3 +20,4 @@ export { default as Card } from './card/card.svelte';
 export { default as Toolbar } from './toolbar/toolbar.svelte';
 export { default as Appbar } from './appbar/appbar.svelte';
 export { default as Spacer } from './spacer/spacer.svelte';
+export { default as Textfield } from './textfield/textfield.svelte';