lapikit 0.2.0 → 0.2.1

package/dist/components/alert/alert.css

@@ -1,23 +1,24 @@
+/* root */
 .kit-alert {
 	--alert-color: var(--on, var(--kit-on-container));
 	--alert-background: var(--base, var(--kit-container));
 	--alert-radius: var(--shape, var(--kit-radius-md));
+}
 
+.kit-alert {
 	display: grid;
 	flex: 1 1;
 	grid-template-areas:
 		'prepend content append close'
 		'. content . .';
-	/* grid-template-columns: max-content auto max-content max-content; */ /* bug */
+	grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
 	position: relative;
 	padding: 1rem;
 	overflow: hidden;
 	color: var(--alert-color);
 	background-color: var(--alert-background);
 	border-radius: var(--alert-radius);
-	/* transition:
-		color 0.5s,
-		background-color 0.5s; */
+	line-height: 0;
 }
 
 .kit-alert .kit-alert--underlay {
@@ -53,7 +54,7 @@
 	padding-top: 0.75rem;
 }
 
-.kit-alert .kit-alert-prepend {
+.kit-alert .kit-alert--prepend {
 	align-self: flex-start;
 	display: flex;
 	align-items: center;
@@ -61,8 +62,8 @@
 	margin-inline-end: 1rem;
 }
 
-.kit-alert .kit-alert-content {
-	align-self: center;
+.kit-alert .kit-alert--content {
+	align-self: flex-start;
 	grid-area: content;
 	overflow: hidden;
 }
@@ -74,6 +75,14 @@
 	grid-area: close;
 }
 
+.kit-alert .kit-alert--append {
+	align-self: flex-start;
+	display: flex;
+	align-items: center;
+	grid-area: append;
+	margin-inline-start: 1rem;
+}
+
 /* state */
 .kit-alert.kit-alert--info:not([class*='alert--variant-']) {
 	--on: var(--kit-on-info);

package/dist/components/button/button.css

@@ -147,8 +147,8 @@
 }
 
 .kit-button[breakpoint]kit-button--variant-outline {
-	--button-color: var(--base, var(--kit-on-container));
-	background-color: transparent;
+	--button-color: var(--on, var(--kit-on-container));
+	background-color: var(--button-background);
 }
 .kit-button[breakpoint]kit-button--variant-outline::before {
 	content: '';

package/dist/components/chip/chip.css

@@ -36,6 +36,7 @@
 	white-space: nowrap;
 	gap: calc(var(--kit-spacing) * var(--chip-multiplier-gap));
 	font-size: calc(var(--kit-spacing) * var(--chip-multiplier-font-size));
+	line-height: 0;
 }
 
 .kit-chip:not(div):not(span)::after {
@@ -115,8 +116,8 @@
 }
 
 .kit-chip[breakpoint]kit-chip--variant-outline {
-	--chip-color: var(--base, var(--kit-oncontainer));
-	background-color: transparent;
+	--chip-color: var(--on, var(--kit-on-container));
+	background-color: var(--chip-background);
 }
 .kit-chip[breakpoint]kit-chip--variant-outline::before {
 	content: '';

package/dist/components/index.d.ts

@@ -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

@@ -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';

package/dist/components/textfield/textfield.css

@@ -0,0 +1,305 @@
+/* root */
+.kit-textfield {
+	--textfield-color: var(--on, var(--kit-on-container));
+	--textfield-background: var(--base, var(--kit-container));
+	--textfield-radius: var(--shape, var(--kit-radius-md));
+}
+
+.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);
+	background-color: var(--textfield-background);
+	border-radius: var(--textfield-radius);
+	color: var(--textfield-color);
+}
+
+.kit-textfield[breakpoint]kit-textfield--variant-outline .kit-field {
+	--textfield-border-color: var(--textfield-color);
+	background-color: var(--textfield-background);
+	border-radius: var(--textfield-radius);
+	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-radius);
+}
+
+.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-error);
+}
+
+.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(--kit-spacing) * var(--textfield-multiplier-font-size));
+	max-width: 100%;
+	contain: layout;
+	flex: 1 0;
+	grid-area: control;
+	position: relative;
+	padding: calc(var(--kit-spacing) * var(--textfield-multiplier-x))
+		calc(var(--kit-spacing) * var(--textfield-multiplier-y));
+	gap: calc(var(--kit-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(--kit-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-error);
+}
+
+.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(--kit-spacing) * var(--textfield-multiplier-y));
+}
+
+.kit-textfield[breakpoint]kit-textfield--density-compact {
+	--textfield-spacing-x: calc(0 - 0.5rem);
+	--textfield-spacing-y: calc(var(--kit-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(--kit-spacing) * var(--textfield-multiplier-y) + 0.5rem);
+}

package/dist/components/textfield/textfield.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import { getAssets } from '../../internal/index.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:--base={assets.color(background)}
+	style:--on={assets.color(color)}
+	style:--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 { Base } from '../../internal/types.js';
+import type { Snippet } from 'svelte';
+export interface TextfieldProps extends Base {
+    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/textfield/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"