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

package/dist/components/popover/popover.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/assets.svelte.js';
-	import { clickOutside } from '../../internal/clickOutside.js';
-	import { getPositions } from './popover.svelte.js';
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
+	import { clickOutside } from '../../internal/helpers/outside.js';
+	import { getPositions } from '../../internal/core/actions/popover.svelte.js';
 	import type { PopoverProps, ModelPopoverProps } from './types.js';
 
 	let {
@@ -63,9 +63,9 @@
 		role="menu"
 		class={['kit-popover-content', light && 'light', dark && 'dark', rest.class]}
 		style={`transform: translate(${axis.x}px, ${axis.y}px);`}
-		style:--base={assets.color(background)}
-		style:--on={assets.color(color)}
-		style:--shape={assets.shape(rounded)}
+		style:--popover-background={assets.color(background)}
+		style:--popover-color={assets.color(color)}
+		style:--popover-shape={assets.shape(rounded)}
 		use:clickOutside={{ exclude: [ref, refActivator], onClose: () => (open = false) }}
 	>
 		{@render children?.()}

package/dist/components/popover/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/separator/separator.css

@@ -1,35 +1,14 @@
 .kit-separator {
-	--separator-opacity: var(--opacity, 0.12);
-	--separator-color: var(--base, var(--kit-scrim));
-
 	display: block;
 	flex: 1 1 100%;
 	height: 0px;
 	max-height: 0px;
-	opacity: var(--separator-opacity);
+	opacity: var(--separator-opacity, 0.12);
 	transition: inherit;
-	border-color: var(--separator-color);
-	transition: border-color 0.5s;
+	border-color: var(--separator-color, var(--kit-label-primary));
 	border-style: solid;
 }
 
-.kit-separator:not(.kit-separator--orientation-vertical) {
-	border-width: var(--border-top-width, thin) 0 0 0;
-}
-
-.kit-separator--orientation-vertical {
-	align-self: stretch;
-	border-width: 0 thin 0 0;
-	display: inline-flex;
-	height: auto;
-	margin-left: 0px;
-	max-height: 100%;
-	max-width: 0px;
-	vertical-align: text-bottom;
-	width: 0px;
-	border-width: 0 var(--border-right-width, thin) 0 0;
-}
-
 .kit-separator--inset:not(.kit-separator--orientation-vertical) {
 	max-width: calc(100% - 4.5rem);
 	margin-inline-start: 4.5rem;
@@ -44,3 +23,20 @@
 .kit-separator:not(.kit-separator--orientation-vertical) {
 	width: 100%;
 }
+
+.kit-separator[breakpoint]kit-separator--orientation-horizontal {
+	border-width: var(--separator-top-width, thin) 0 0 0;
+}
+
+.kit-separator[breakpoint]kit-separator--orientation-vertical {
+	align-self: stretch;
+	border-width: 0 thin 0 0;
+	display: inline-flex;
+	height: auto;
+	margin-left: 0px;
+	max-height: 100%;
+	max-width: 0px;
+	vertical-align: text-bottom;
+	width: 0px;
+	border-width: 0 var(--separator-right-width, thin) 0 0;
+}

package/dist/components/separator/separator.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/index.js';
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
 	import type { SeparatorProps } from './types.js';
 
 	let {
@@ -28,10 +28,10 @@
 		orientation && assets.className('separator', 'orientation', orientation),
 		rest.class
 	]}
-	aria-orientation={orientation}
+	aria-orientation={typeof orientation === 'string' ? orientation : undefined}
 	role="separator"
-	style:--base={assets.color(color)}
-	style:--opacity={opacity}
-	style:--border-top-width={orientation === 'horizontal' ? assets.unit(thickness) : undefined}
-	style:--border-right-width={orientation === 'vertical' ? assets.unit(thickness) : undefined}
+	style:--separator-color={assets.color(color)}
+	style:--separator-opacity={opacity}
+	style:--separator-top-width={orientation === 'horizontal' ? assets.unit(thickness) : undefined}
+	style:--separator-right-width={orientation === 'vertical' ? assets.unit(thickness) : undefined}
 />

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

@@ -1,4 +1,5 @@
-import type { Base } from '../../internal/types.js';
+import type { Base } from '../../internal/types/index.js';
+type Orientation = 'horizontal' | 'vertical';
 export interface SeparatorProps extends Base {
     is?: 'div' | 'hr';
     light?: boolean;
@@ -7,5 +8,8 @@ export interface SeparatorProps extends Base {
     thickness?: string;
     opacity?: string | number;
     color?: string;
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: Orientation | {
+        [key: string]: Orientation;
+    };
 }
+export {};

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

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

package/dist/components/textfield/textfield.css

@@ -0,0 +1,298 @@
+.kit-textfield {
+	flex: 1 1 auto;
+	font-size: 1rem;
+	display: grid;
+	grid-template-areas:
+		'prepend control append'
+		'a messages b';
+	grid-template-columns: max-content minmax(0, 1fr) max-content;
+	grid-template-rows: 1fr auto;
+}
+
+/* variant */
+.kit-textfield[breakpoint]kit-textfield--variant-filled .kit-field {
+	--textfield-border-color: var(--textfield-background, var(--kit-background-grouped-primary));
+	background-color: var(--textfield-background, var(--kit-background-grouped-primary));
+	border-radius: var(--textfield-shape, var(--system-shape-md));
+	color: var(--textfield-color, var(--kit-label-primary));
+}
+
+.kit-textfield[breakpoint]kit-textfield--variant-outline .kit-field {
+	--textfield-border-color: var(--textfield-color);
+	background-color: var(--textfield-background);
+	border-radius: var(--textfield-shape);
+	color: var(--textfield-color);
+}
+
+.kit-textfield[breakpoint]kit-textfield--variant-filled .kit-textfield-outline,
+.kit-textfield[breakpoint]kit-textfield--variant-outline .kit-textfield-outline {
+	border-bottom: 1px solid var(--textfield-border-color);
+	border-top: 1px solid var(--textfield-border-color);
+	border-right: 1px solid var(--textfield-border-color);
+	border-left: 1px solid var(--textfield-border-color);
+	border-radius: var(--textfield-shape);
+}
+
+.kit-textfield[breakpoint]kit-textfield--variant-text .kit-field {
+	--textfield-border-color: var(--textfield-color);
+	background-color: transparent;
+	border-radius: 0;
+	color: var(--textfield-color);
+}
+
+.kit-textfield[breakpoint]kit-textfield--variant-text .kit-textfield-outline {
+	border-bottom: 1px solid var(--textfield-border-color);
+	border-top: 0;
+	border-right: 0;
+	border-left: 0;
+	border-radius: 0;
+}
+
+.kit-textfield--hide-spin-buttons input[type='number'] {
+	-moz-appearance: textfield;
+	appearance: textfield;
+}
+.kit-textfield--hide-spin-buttons input[type='number']::-webkit-inner-spin-button,
+.kit-textfield--hide-spin-buttons input[type='number']::-webkit-outer-spin-button {
+	display: none;
+	-webkit-appearance: none;
+}
+
+.kit-textfield--disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.kit-textfield--readonly {
+	pointer-events: none;
+}
+
+.kit-textfield--error .kit-textfield-outline {
+	border: 1px solid var(--kit-accent-destructive);
+}
+
+.kit-textfield-outline {
+	align-items: stretch;
+	contain: layout;
+	display: flex;
+	height: 100%;
+	left: 0;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+	width: 100%;
+}
+
+.kit-textfield .kit-textfield-prepend {
+	display: flex;
+	grid-area: prepend;
+	margin-inline-end: 16px;
+	align-items: center;
+	padding-top: 0;
+}
+
+.kit-textfield .kit-textfield-append {
+	display: flex;
+	grid-area: append;
+	margin-inline-start: 16px;
+	align-items: center;
+	padding-top: 0;
+}
+
+/* control */
+.kit-textfield-control {
+	display: flex;
+	grid-area: control;
+}
+
+.kit-textfield-control .kit-textfield-prepend-inner {
+	grid-area: prepend-inner;
+	display: flex;
+	align-items: center;
+	padding-top: 0;
+}
+.kit-textfield-control .kit-textfield-clearable {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	padding-top: 0;
+	overflow: hidden;
+	margin-inline: 4px;
+	grid-area: clear;
+	opacity: 0;
+}
+
+.kit-textfield-clearable.kit-textfield-clearable--visible {
+	opacity: 1;
+}
+
+.kit-textfield-control .kit-textfield-append-inner {
+	grid-area: append-inner;
+	display: flex;
+	align-items: center;
+	padding-top: 0;
+}
+
+/* field prefix suffix */
+.kit-field .kit-field--field .kit-field--field-prefix,
+.kit-field .kit-field--field .kit-field--field-suffix {
+	align-items: center;
+	cursor: default;
+	display: flex;
+	transition: inherit;
+	white-space: nowrap;
+}
+
+/* field */
+.kit-textfield-control .kit-field {
+	display: grid;
+	grid-template-areas: 'prepend-inner field clear append-inner';
+	grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
+	font-size: calc(var(--system-spacing) * var(--textfield-multiplier-font-size));
+	max-width: 100%;
+	contain: layout;
+	flex: 1 0;
+	grid-area: control;
+	position: relative;
+	padding: calc(var(--system-spacing) * var(--textfield-multiplier-x))
+		calc(var(--system-spacing) * var(--textfield-multiplier-y));
+	gap: calc(var(--system-spacing) * var(--textfield-multiplier-gap));
+}
+
+.kit-textfield-control .kit-field .kit-field--field {
+	flex: 1 0;
+	grid-area: field;
+	position: relative;
+	align-items: flex-start;
+	display: flex;
+}
+
+.kit-field .kit-field--field input {
+	font: inherit;
+	border-radius: 0;
+	color: inherit;
+	flex: 1;
+	min-width: 0;
+	align-items: center;
+	color: inherit;
+	column-gap: 2px;
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+	width: 100%;
+	row-gap: 8px;
+}
+
+.kit-field .kit-field--field input:focus,
+.kit-field .kit-field--field input:focus-visible,
+.kit-field .kit-field--field input:active {
+	outline: none;
+	box-shadow: none;
+}
+
+/* message */
+.kit-textfield-message {
+	padding-inline: var(--textfield-spacing-y);
+	align-items: flex-end;
+	display: flex;
+	font-size: 0.75rem;
+	grid-area: messages;
+	min-height: 22px;
+	padding-top: var(--textfield-spacing-x);
+	overflow: hidden;
+	justify-content: space-between;
+	opacity: 0;
+}
+
+.kit-textfield-message.kit-textfield-message--visible {
+	opacity: 1;
+}
+
+.kit-message {
+	flex: 1 1 auto;
+	font-size: 12px;
+	min-height: 14px;
+	min-width: 1px;
+	position: relative;
+	display: grid;
+	gap: calc(var(--system-spacing) * var(--textfield-multiplier-gap));
+	grid-template-areas: 'message-prepend message message-append ';
+	grid-template-columns: max-content minmax(0, 1fr) max-content;
+}
+
+.kit-message.kit-message--message-error {
+	color: var(--kit-accent-destructive);
+}
+
+.kit-message .kit-message--message {
+	line-height: 12px;
+	word-break: break-word;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
+	hyphens: auto;
+	grid-area: message;
+}
+
+.kit-message .kit-message--prepend,
+.kit-message .kit-message--append {
+	line-height: 12px;
+}
+
+.kit-message .kit-message--prepend {
+	grid-area: message-prepend;
+}
+.kit-message .kit-message--append {
+	grid-area: message-append;
+}
+
+/* size */
+.kit-textfield[breakpoint]kit-textfield--size-xs {
+	--textfield-multiplier-x: 2;
+	--textfield-multiplier-y: 2;
+	--textfield-multiplier-gap: 1;
+	--textfield-multiplier-font-size: 6;
+}
+
+.kit-textfield[breakpoint]kit-textfield--size-sm {
+	--textfield-multiplier-x: 3;
+	--textfield-multiplier-y: 4;
+	--textfield-multiplier-gap: 2;
+	--textfield-multiplier-font-size: 7;
+}
+
+.kit-textfield[breakpoint]kit-textfield--size-md {
+	--textfield-multiplier-x: 4;
+	--textfield-multiplier-y: 6;
+	--textfield-multiplier-gap: 2;
+	--textfield-multiplier-font-size: 8;
+}
+
+.kit-textfield[breakpoint]kit-textfield--size-lg {
+	--textfield-multiplier-x: 5;
+	--textfield-multiplier-y: 6;
+	--textfield-multiplier-gap: 2;
+	--textfield-multiplier-font-size: 9;
+}
+
+.kit-textfield[breakpoint]kit-textfield--size-xl {
+	--textfield-multiplier-x: 6;
+	--textfield-multiplier-y: 8;
+	--textfield-multiplier-gap: 3;
+	--textfield-multiplier-font-size: 10;
+}
+
+/*density */
+.kit-textfield[breakpoint]kit-textfield--density-default {
+	--textfield-spacing-x: 0;
+	--textfield-spacing-y: calc(var(--system-spacing) * var(--textfield-multiplier-y));
+}
+
+.kit-textfield[breakpoint]kit-textfield--density-compact {
+	--textfield-spacing-x: calc(0 - 0.5rem);
+	--textfield-spacing-y: calc(var(--system-spacing) * var(--textfield-multiplier-y) - 0.5rem);
+}
+
+.kit-textfield[breakpoint]kit-textfield--density-comfortable {
+	--textfield-spacing-x: calc(0 + 0.5rem);
+	--textfield-spacing-y: calc(var(--system-spacing) * var(--textfield-multiplier-y) + 0.5rem);
+}

package/dist/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/components/textfield/textfield.svelte.d.ts

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

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

@@ -0,0 +1,37 @@
+import type { Component } from '../../internal/types/index.js';
+import type { Snippet } from 'svelte';
+export interface TextfieldProps extends Component {
+    ref?: HTMLElement | null;
+    dark?: boolean;
+    light?: boolean;
+    value?: string | number;
+    type?: 'text' | 'email' | 'password' | 'number';
+    placeholder?: string;
+    counter?: boolean;
+    min?: number;
+    max?: number;
+    variant?: 'outline' | 'text' | 'filled';
+    density?: 'compact' | 'comfortable' | 'default';
+    error?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    color?: string;
+    background?: string;
+    size?: string | {
+        [key: string]: string;
+    };
+    readonly?: boolean;
+    hideSpinButtons?: boolean;
+    persistentMessage?: boolean;
+    persistentClear?: boolean;
+    clearable?: boolean;
+    message?: string;
+    messagePrefix?: string;
+    messageSuffix?: string;
+    append?: Snippet;
+    prepend?: Snippet;
+    prependInner?: Snippet;
+    appendInner?: Snippet;
+    prefix?: string;
+    suffix?: string;
+}