lapikit 0.4.13 → 0.4.14

package/dist/{labs → @legacy}/components/separator/separator.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SeparatorProps } from './separator.types.ts';
-declare const Separator: import("svelte").Component<SeparatorProps, {}, "ref">;
+import type { SeparatorProps } from './types.js';
+declare const Separator: import("svelte").Component<SeparatorProps, {}, "">;
 type Separator = ReturnType<typeof Separator>;
 export default Separator;

package/dist/@legacy/components/spacer/spacer.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import type { SpacerProps } from './types.js';
+
+	let { is = 'div', ...rest }: SpacerProps = $props();
+</script>
+
+<svelte:element this={is} {...rest} class={['kit-spacer', rest.class]}> </svelte:element>

package/dist/{labs → @legacy}/components/spacer/spacer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SpacerProps } from './spacer.types.ts';
+import type { SpacerProps } from './types.js';
 declare const Spacer: import("svelte").Component<SpacerProps, {}, "">;
 type Spacer = ReturnType<typeof Spacer>;
 export default Spacer;

package/dist/{components → @legacy/components}/spacer/types.d.ts

@@ -1,4 +1,4 @@
-import type { Base } from '../../internal/types/index.js';
+import type { Base } from '../../../internal/types/index.js';
 export interface SpacerProps extends Base {
     is?: 'div';
 }

package/dist/@legacy/components/textfield/textfield.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
+	import type { TextfieldProps } from './types.js';
+
+	//external
+	import { Icon } from '../index.js';
+
+	let {
+		ref = $bindable(),
+		prepend,
+		append,
+		prependInner,
+		appendInner,
+		value = $bindable(),
+		type = 'text',
+		density = 'default',
+		size = 'md',
+		variant = 'filled',
+		placeholder,
+		light,
+		dark,
+		counter,
+		min,
+		max,
+		prefix,
+		suffix,
+		message,
+		messagePrefix,
+		messageSuffix,
+		clearable,
+		persistentClear,
+		disabled,
+		error,
+		errorMessage,
+		persistentMessage,
+		hideSpinButtons, // only type="number"
+		readonly,
+		color,
+		background,
+		rounded,
+		...rest
+	}: TextfieldProps = $props();
+
+	const assets = getAssets();
+
+	let counterValue: number = $state(0);
+	let displayMessage: boolean = $state(false);
+	let displayClear: boolean = $state(false);
+
+	const inputClear = () => {
+		value = undefined;
+	};
+
+	const handleFocus = () => {
+		if (!error && !persistentMessage) displayMessage = true;
+	};
+
+	const handleBlur = () => {
+		if (!error && !persistentMessage) displayMessage = false;
+	};
+
+	$effect(() => {
+		if (persistentClear) displayClear = true;
+		if (persistentMessage) displayMessage = true;
+		else if (error) displayMessage = true;
+		else if (!error) displayMessage = false;
+	});
+
+	$effect(() => {
+		const valueStr = value?.toString() || '';
+
+		if (valueStr && typeof max === 'number' && max > 0 && valueStr.length > max) {
+			const truncated = valueStr.slice(0, max);
+			if (typeof value === 'number') {
+				const numValue = Number(truncated);
+				value = isNaN(numValue) ? undefined : numValue;
+			} else {
+				value = truncated;
+			}
+		}
+
+		counterValue = valueStr.length;
+	});
+
+	$effect(() => {
+		if (!persistentClear) {
+			if (value) displayClear = true;
+			else displayClear = false;
+		}
+	});
+</script>
+
+<div
+	bind:this={ref}
+	{...rest}
+	class={[
+		'kit-textfield',
+		light && 'light',
+		dark && 'dark',
+		size && assets.className('textfield', 'size', size),
+		variant && assets.className('textfield', 'variant', variant),
+		density && assets.className('textfield', 'density', density),
+		disabled && 'kit-textfield--disabled',
+		readonly && 'kit-textfield--readonly',
+		error && 'kit-textfield--error',
+		type === 'number' && hideSpinButtons && 'kit-textfield--hide-spin-buttons',
+		rest.class
+	]}
+	style:--textfield-background={assets.color(background)}
+	style:--textfield-color={assets.color(color)}
+	style:--textfield-shape={assets.shape(rounded)}
+>
+	{#if prepend}
+		<div class="kit-textfield-prepend">
+			{@render prepend?.()}
+		</div>
+	{/if}
+	<div class="kit-textfield-control">
+		<div class="kit-field">
+			{#if prependInner}
+				<div class="kit-textfield-prepend-inner">
+					{@render prependInner?.()}
+				</div>
+			{/if}
+			<div class="kit-field--field">
+				{#if prefix}
+					<span class="kit-field--field-prefix">
+						<span class="kit-textfield--field-prefix--text">{prefix}</span>
+					</span>
+				{/if}
+				<input
+					{type}
+					size="1"
+					{placeholder}
+					bind:value
+					onfocus={handleFocus}
+					onblur={handleBlur}
+					{...max && { maxlength: max }}
+					{...min && { minlength: min }}
+					{...disabled && { disabled: true }}
+					{...readonly && { readonly: true }}
+				/>
+				{#if suffix}
+					<span class="kit-field--field-suffix">
+						<span class="kit-textfield--field-suffix--text">{suffix}</span>
+					</span>
+				{/if}
+			</div>
+			{#if clearable}
+				<div
+					class={['kit-textfield-clearable', displayClear && 'kit-textfield-clearable--visible']}
+				>
+					<Icon icon="mgc_close_circle_fill" onclick={() => inputClear()} />
+				</div>
+			{/if}
+
+			{#if appendInner}
+				<div class="kit-textfield-append-inner">
+					{@render appendInner?.()}
+				</div>
+			{/if}
+
+			<div class="kit-textfield-outline"></div>
+		</div>
+	</div>
+	{#if append}
+		<div class="kit-textfield-append">
+			{@render append?.()}
+		</div>
+	{/if}
+
+	<div class={['kit-textfield-message', displayMessage && 'kit-textfield-message--visible']}>
+		<div class={['kit-message', error && 'kit-message--message-error']}>
+			{#if messagePrefix}
+				<div class="kit-message--prepend">{messagePrefix}</div>
+			{/if}
+			{#if message || error}
+				<div class="kit-message--message">
+					{error ? errorMessage || message : message}
+				</div>
+			{/if}
+			{#if counter || messageSuffix}
+				<div class="kit-message--append">
+					{#if counter}
+						{counterValue}{max ? `/${max}` : ''}
+					{:else if messageSuffix}
+						{messageSuffix}
+					{/if}
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/{labs → @legacy}/components/textfield/textfield.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TextfieldProps } from './textfield.types.ts';
+import type { TextfieldProps } from './types.js';
 declare const Textfield: import("svelte").Component<TextfieldProps, {}, "ref" | "value">;
 type Textfield = ReturnType<typeof Textfield>;
 export default Textfield;

package/dist/@legacy/components/toolbar/toolbar.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
+	import type { ToolbarProps } from './types.js';
+
+	let {
+		children,
+		ref = $bindable(),
+		is = 'div',
+		classContent,
+		light,
+		dark,
+		variant,
+		rounded,
+		background,
+		color,
+		density = 'default',
+		orientation = 'horizontal',
+		location,
+		...rest
+	}: ToolbarProps = $props();
+
+	const assets = getAssets();
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	{...rest}
+	role="toolbar"
+	class={[
+		'kit-toolbar',
+		light && 'light',
+		dark && 'dark',
+		variant && assets.className('toolbar', 'variant', variant),
+		density && assets.className('toolbar', 'density', density),
+		orientation && assets.className('toolbar', 'orientation', orientation),
+		location && assets.className('toolbar', 'location', location),
+		rest.class
+	]}
+	style:--toolbar-background={assets.color(background)}
+	style:--toolbar-color={assets.color(color)}
+	style:--toolbar-shape={assets.shape(rounded)}
+>
+	<div class={['kit-toolbar--wrapper', classContent]}>
+		{@render children?.()}
+	</div>
+</svelte:element>

package/dist/{labs → @legacy}/components/toolbar/toolbar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ToolbarProps } from './toolbar.types.ts';
+import type { ToolbarProps } from './types.js';
 declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "ref">;
 type Toolbar = ReturnType<typeof Toolbar>;
 export default Toolbar;

package/dist/@legacy/components/tooltip/tooltip.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
+	import { getPositionsTooltip } from '../../internal/core/actions/tooltip.svelte.js';
+	import type { PositionElement, TooltipProps } from './types.js';
+
+	let {
+		children,
+		tooltip,
+		open = $bindable(),
+		label,
+		dark,
+		light,
+		rounded,
+		color,
+		background,
+		location = 'bottom',
+		delayDuration = 850,
+		density = 'default',
+		variant,
+		disabled,
+		avoidCollisions = true,
+		forceMount,
+		...rest
+	}: TooltipProps = $props();
+
+	const positionAxis = getPositionsTooltip();
+	const assets = getAssets();
+
+	let ref: HTMLElement | null = $state(null);
+	let refTooltip: HTMLElement | null = $state(null);
+	let timer: ReturnType<typeof setTimeout> | null = $state(null);
+	let axis: PositionElement = $state({ x: 0, y: 0, location: null });
+	let innerHeight = $state(0);
+	let innerWidth = $state(0);
+	let scrollX = $state(0);
+	let scrollY = $state(0);
+
+	axis = positionAxis?.values;
+
+	$effect(() => {
+		if (
+			open &&
+			ref &&
+			refTooltip &&
+			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
+		) {
+			positionAxis.update(ref, refTooltip, location, true, avoidCollisions);
+		}
+	});
+
+	$effect(() => {
+		if (tooltip) forceMount = true;
+	});
+
+	const handleMouse = (state: string) => {
+		if (disabled) return (open = false);
+		if (state === 'enter') {
+			timer = setTimeout(() => {
+				open = true;
+			}, delayDuration);
+		} else if (state === 'leave') {
+			if (timer) {
+				clearTimeout(timer);
+				timer = null;
+			}
+			open = false;
+		}
+	};
+</script>
+
+<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	bind:this={ref}
+	onmouseenter={() => handleMouse('enter')}
+	onmouseleave={() => handleMouse('leave')}
+	style:display="inline-flex"
+>
+	{@render children?.()}
+</span>
+
+{#if open || forceMount}
+	<div
+		bind:this={refTooltip}
+		class={['kit-tooltip']}
+		role="tooltip"
+		aria-label={label}
+		style={`transform: translate(${axis.x}px, ${axis.y}px);display: ${open ? 'initial' : 'none'}`}
+	>
+		<div
+			class={[
+				'kit-tooltip-content animate-in',
+				light && 'light',
+				dark && 'dark',
+				rounded && assets.shape(rounded),
+				axis?.location && `kit-tooltip-content--${axis?.location}`,
+				variant && `kit-tooltip-content--${variant}`,
+				density && assets.className('tooltip-content', 'density', density),
+				rest.class
+			]}
+			style:--tooltip-background={assets.color(background)}
+			style:--tooltip-color={assets.color(color)}
+			style:--tooltip-shape={assets.shape(rounded)}
+		>
+			{#if tooltip}
+				{@render tooltip?.()}
+			{:else}
+				{label}
+			{/if}
+		</div>
+	</div>
+{/if}

package/dist/{labs → @legacy}/components/tooltip/tooltip.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TooltipProps } from './tooltip.types.ts';
-declare const Tooltip: import("svelte").Component<TooltipProps, {}, "ref" | "open">;
+import type { TooltipProps } from './types.js';
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "open">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/{components → @legacy/components}/tooltip/types.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from '../../internal/types/index.js';
+import type { Component } from '../../../internal/types/index.js';
 import type { Snippet } from 'svelte';
 export interface TooltipProps extends Component {
     open?: boolean;

package/dist/{labs/animations → animations}/ripple.d.ts

@@ -1,4 +1,4 @@
-import type { RippleProps } from '../utils/types/index.ts';
+import type { RippleProps } from '../utils/types';
 export declare function ripple(el: HTMLElement, options?: RippleProps): {
     destroy(): void;
     update(newOptions: RippleProps): void;

package/dist/compiler/index.d.ts

@@ -0,0 +1 @@
+export * from './preprocess';

package/dist/compiler/index.js

@@ -0,0 +1 @@
+export * from './preprocess';

package/dist/{labs/compiler → compiler}/mapped-code.d.ts

@@ -1,5 +1,5 @@
-import type { SClassProp, SStyleProp } from './types/index.js';
-import type { PropValue } from '../utils/types/index.js';
+import type { SClassProp, SStyleProp } from './types';
+import type { PropValue } from '../utils/types';
 /**
  * Computes a string of class names based on the provided sClass and classDirectiveProps.
  * @param sClass - The s-class property which can be a string, array, or object.

package/dist/{labs/compiler → compiler}/preprocess/decode-sourcemap.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo, KitComponentScan } from '../types/index.js';
+import type { ComponentInfo, KitComponentScan } from '../types';
 export declare const decodeSourceMap: (content: string, componentInfo: Map<string, ComponentInfo>) => KitComponentScan;

package/dist/{labs/compiler → compiler}/preprocess/decode-sourcemap.js

@@ -1,4 +1,4 @@
-import { findTagEnd } from './finding.js';
+import { findTagEnd } from './finding';
 export const decodeSourceMap = (content, componentInfo) => {
     const importedComponents = new Map();
     const parts = [];

package/dist/compiler/preprocess/index.d.ts

@@ -0,0 +1 @@
+export * from './lili';

package/dist/compiler/preprocess/index.js

@@ -0,0 +1 @@
+export * from './lili';

package/dist/{labs/compiler → compiler}/preprocess/lili.d.ts

@@ -1,4 +1,4 @@
-import type { LapikitPreprocessOptions } from '../types/index.js';
+import type { LapikitPreprocessOptions } from '../types';
 export declare function liliCore(options?: LapikitPreprocessOptions): {
     markup({ content }: {
         content: string;

package/dist/{labs/compiler → compiler}/preprocess/lili.js

@@ -1,8 +1,8 @@
-import { componentName, lapikitImportsRef } from './source-import.js';
-import { decodeSourceMap } from './decode-sourcemap.js';
+import { componentName, lapikitImportsRef } from './source-import';
+import { decodeSourceMap } from './decode-sourcemap';
 // imports components and plugins
-import lapikitComponents from '../components.js';
-import lapikitPlugins from '../plugins.js';
+import lapikitComponents from '../components';
+import lapikitPlugins from '../plugins';
 export function liliCore(options) {
     return {
         markup({ content }) {

package/dist/{labs/compiler → compiler}/preprocess/source-import.d.ts

@@ -4,4 +4,4 @@
  * @returns The component name with "Kit" prefix and the first letter capitalized
  */
 export declare function componentName(shortName: string): string;
-export declare const lapikitImportsRef = "lapikit/labs/components";
+export declare const lapikitImportsRef = "lapikit/components";

package/dist/{labs/compiler → compiler}/preprocess/source-import.js

@@ -6,4 +6,4 @@
 export function componentName(shortName) {
     return 'Kit' + shortName.charAt(0).toUpperCase() + shortName.slice(1);
 }
-export const lapikitImportsRef = 'lapikit/labs/components';
+export const lapikitImportsRef = 'lapikit/components';

package/dist/compiler/types/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './dom';
+export * from './options';

package/dist/compiler/types/index.js

@@ -0,0 +1 @@
+export * from './options';

package/dist/components/accordion/accordion.svelte

@@ -1,39 +1,133 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { AccordionProps } from './types.js';
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import type { AccordionProps } from './accordion.types.js';
 
 	let {
 		ref = $bindable(),
-		children,
 		is = 'div',
-		dark,
-		light,
-		color,
-		background,
-		spacer,
-		hideIcon,
-		rounded,
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		text = undefined,
+		dark = false,
+		light = false,
+		color = undefined,
+		background = undefined,
+		rounded = undefined,
+		spacer = false,
+		hideIcon = false,
 		...rest
 	}: AccordionProps = $props();
 
-	const assets = getAssets();
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-accordion',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-accordion-color:${color}` : '',
+			background ? `--kit-accordion-background:${background}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <svelte:element
 	this={is}
 	bind:this={ref}
-	{...rest}
-	class={[
-		'kit-accordion',
-		spacer && 'kit-accordion--spacer',
-		hideIcon && 'kit-accordion--hide-icon',
-		light && 'light',
-		dark && 'dark',
-		rest.class
-	]}
-	style:--accordion-shape={assets.shape(rounded)}
-	style:--accordion-background={assets.color(background)}
-	style:--accordion-color={assets.color(color)}
+	class={componentClass}
+	style={mergedStyle}
+	{...restProps}
+	data-text={text ? true : undefined}
+	data-dark={dark}
+	data-light={light}
+	data-spacer={spacer}
+	data-hide-icon={hideIcon}
+	data-rounded={rounded}
 >
 	{@render children?.()}
 </svelte:element>
+
+<style>
+	.kit-accordion {
+		--kit-accordion-radius: 8px;
+		--kit-accordion-gap: 0;
+		--kit-accordion-color: var(--kit-fg);
+		--kit-accordion-background: transparent;
+
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		width: 100%;
+		padding: 0;
+		list-style: none;
+		position: relative;
+		z-index: 1;
+		gap: var(--kit-accordion-gap);
+		color: var(--kit-accordion-color);
+		background: var(--kit-accordion-background);
+	}
+
+	.kit-accordion[data-spacer='true'] {
+		--kit-accordion-gap: 1rem;
+	}
+
+	.kit-accordion[data-rounded='0'] {
+		--kit-accordion-radius: 0;
+	}
+
+	.kit-accordion[data-rounded='xs'] {
+		--kit-accordion-radius: 2px;
+	}
+
+	.kit-accordion[data-rounded='sm'] {
+		--kit-accordion-radius: 4px;
+	}
+
+	.kit-accordion[data-rounded='md'] {
+		--kit-accordion-radius: 8px;
+	}
+
+	.kit-accordion[data-rounded='lg'] {
+		--kit-accordion-radius: 16px;
+	}
+
+	.kit-accordion[data-rounded='xl'] {
+		--kit-accordion-radius: 99999px;
+	}
+
+	.kit-accordion[data-dark='true'] {
+		--kit-accordion-background: var(--kit-surface-3);
+		--kit-accordion-color: var(--kit-fg);
+	}
+
+	.kit-accordion[data-light='true'] {
+		--kit-accordion-background: var(--kit-surface-1);
+	}
+
+	.kit-accordion[data-hide-icon='true'] :global(.kit-accordion-item__indicator) {
+		display: none;
+	}
+</style>

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

@@ -1,4 +1,4 @@
-import type { AccordionProps } from './types.js';
+import type { AccordionProps } from './accordion.types.ts';
 declare const Accordion: import("svelte").Component<AccordionProps, {}, "ref">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/{labs/components → components}/accordion/accordion.types.d.ts

@@ -1,4 +1,4 @@
-import type { RoundedType, Component } from '../../utils/types/index.js';
+import type { RoundedType, Component } from '../../utils/types';
 import type { Snippet } from 'svelte';
 export interface AccordionProps extends Component {
     ref?: HTMLElement | null;