lapikit 0.0.0-insiders.f81b991 → 0.0.0-insiders.fb12c48

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;
+}

package/dist/components/toolbar/toolbar.css

@@ -1,75 +1,52 @@
 .kit-toolbar {
-	--toolbar-color: var(--on, var(--kit-on-surface));
-	--toolbar-background: var(--base, var(--kit-surface));
-	--toolbar-radius: var(--shape, var(--kit-radius-md));
-
 	display: flex;
 	align-items: center;
-	min-width: max-content;
 	border-style: solid;
-	/* transition:
-		color 0.5s,
-		border-color 0.5s,
-		background-color 0.5s; */
-
 	border-width: 1px;
 	border-style: solid;
-	border-radius: var(--toolbar-radius);
-
-	/* theme */
-	color: var(--toolbar-color);
-	background-color: var(--toolbar-background);
-	border-color: var(--toolbar-background);
+	border-radius: var(--toolbar-shape, var(--system-shape-md));
+	color: var(--toolbar-color, var(--kit-label-primary));
+	background-color: var(--toolbar-background, var(--kit-background-grouped-tertiary));
+	border-color: var(--toolbar-background, var(--kit-background-grouped-tertiary));
 }
 
 /* density */
-.kit-toolbar[breakpoint]kit-toolbar--density-default {
-	border-radius: calc(var(--kit-spacing) * 2.25);
-}
 .kit-toolbar[breakpoint]kit-toolbar--density-default:not([class*='toolbar--orientation-vertical']) {
 	height: 3rem;
-	padding-inline: calc(var(--kit-spacing) * 1.5);
+	padding-inline: calc(var(--system-spacing) * 1.5);
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-default[class*='toolbar--orientation-vertical'] {
 	width: 3rem;
-	padding: calc(var(--kit-spacing) * 1.5) 0;
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--density-compact {
-	border-radius: calc(var(--kit-spacing) * 1.75);
+	padding: calc(var(--system-spacing) * 1.5) 0;
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-compact:not([class*='toolbar--orientation-vertical']) {
 	height: 2.625rem;
-	padding-inline: calc(var(--kit-spacing) * 0.75);
+	padding-inline: calc(var(--system-spacing) * 0.75);
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-compact[class*='toolbar--orientation-vertical'] {
 	width: 2.625rem;
-	padding: calc(var(--kit-spacing) * 0.75) 0;
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--density-comfortable {
-	border-radius: calc(var(--kit-spacing) * 3.5);
+	padding: calc(var(--system-spacing) * 0.75) 0;
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-comfortable:not(
 		[class*='toolbar--orientation-vertical']
 	) {
 	height: 3.5rem;
-	padding-inline: calc(var(--kit-spacing) * 2.25);
+	padding-inline: calc(var(--system-spacing) * 2.25);
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-comfortable[class*='toolbar--orientation-vertical'] {
 	width: 3.5rem;
-	padding: calc(var(--kit-spacing) * 2.25) 0;
+	padding: calc(var(--system-spacing) * 2.25) 0;
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--variant-text,
 .kit-toolbar[breakpoint]kit-toolbar--variant-outline,
 .kit-toolbar[breakpoint]kit-toolbar--variant-dash {
-	--toolbar-color: var(--base, var(--kit-surface));
+	--toolbar-color: var(--base, var(--kit-background-grouped-primary));
 	background-color: transparent;
 }
 

package/dist/components/toolbar/toolbar.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 { ToolbarProps } from './types.js';
 
 	let {
@@ -37,9 +37,9 @@
 		location && assets.className('toolbar', 'location', location),
 		rest.class
 	]}
-	style:--base={assets.color(background)}
-	style:--on={assets.color(color)}
-	style:--shape={assets.shape(rounded)}
+	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?.()}

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

@@ -1,4 +1,4 @@
-import type { Component } from '../../internal/types.js';
+import type { Component } from '../../internal/types/index.js';
 type Variant = 'outline' | 'text' | 'dash';
 type Density = 'compact' | 'comfortable' | 'default';
 type Orientation = 'horizontal' | 'vertical';

package/dist/components/tooltip/tooltip.css

@@ -6,24 +6,16 @@
 }
 
 .kit-tooltip-content {
-	--tooltip-color: var(--on, var(--kit-on-surface));
-	--tooltip-background: var(--base, var(--kit-surface));
-	--tooltip-radius: var(--shape, var(--kit-radius-md));
-
-	background-color: var(--tooltip-background);
-	color: var(--tooltip-color);
-	border-radius: var(--tooltip-radius);
-	border: 1px solid var(--tooltip-background);
+	background-color: var(--tooltip-background, var(--kit-background-grouped-primary));
+	color: var(--tooltip-color, var(--kit-label-primary));
+	border-radius: var(--tooltip-shape, var(--system-shape-md));
+	border: 1px solid var(--tooltip-background, var(--kit-background-grouped-primary));
 	font-size: 0.875rem;
 	display: inline-block;
 	width: auto;
 	pointer-events: none;
 	overflow-wrap: break-word;
-	/* transition:
-		color 0.5s,
-		border-color 0.5s,
-		background-color 0.5s; */
-	box-shadow: 0px 16px 29px -10px color-mix(in oklab, var(--kit-scrim) 60%, transparent);
+	box-shadow: 0px 16px 29px -10px color-mix(in oklab, var(--kit-state-shadow) 60%, transparent);
 }
 
 /* density */

package/dist/components/tooltip/tooltip.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/assets.svelte.js';
-	import { getPositionsTooltip } from './tooltip.svelte.js';
+	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 {
@@ -99,9 +99,9 @@
 				density && assets.className('tooltip-content', 'density', density),
 				rest.class
 			]}
-			style:--base={assets.color(background)}
-			style:--on={assets.color(color)}
-			style:--shape={assets.shape(rounded)}
+			style:--tooltip-background={assets.color(background)}
+			style:--tooltip-color={assets.color(color)}
+			style:--tooltip-shape={assets.shape(rounded)}
 		>
 			{#if tooltip}
 				{@render tooltip?.()}