lapikit 0.0.0-insiders.b9305c0 → 0.0.0-insiders.baf0558

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/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 {

package/dist/components/textfield/textfield.css

@@ -16,6 +16,45 @@
 	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;
@@ -49,7 +88,6 @@
 	position: absolute;
 	right: 0;
 	width: 100%;
-	border: 1px solid var(--textfield-background);
 }
 
 .kit-textfield .kit-textfield-prepend {
@@ -72,9 +110,6 @@
 .kit-textfield-control {
 	display: flex;
 	grid-area: control;
-	background-color: var(--textfield-background);
-	border-radius: var(--textfield-radius);
-	color: var(--textfield-color);
 }
 
 .kit-textfield-control .kit-textfield-prepend-inner {
@@ -119,14 +154,16 @@
 .kit-textfield-control .kit-field {
 	display: grid;
 	grid-template-areas: 'prepend-inner field clear append-inner';
-	grid-template-columns: min-content minmax(0, 1fr) min-content min-content;
-	font-size: 16px;
+	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%;
-	border-radius: 4px;
 	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 {
@@ -141,7 +178,6 @@
 	font: inherit;
 	border-radius: 0;
 	color: inherit;
-	/* opacity: 0; */
 	flex: 1;
 	min-width: 0;
 	align-items: center;
@@ -163,13 +199,13 @@
 
 /* message */
 .kit-textfield-message {
-	padding-inline: 16px;
+	padding-inline: var(--textfield-spacing-y);
 	align-items: flex-end;
 	display: flex;
 	font-size: 0.75rem;
 	grid-area: messages;
 	min-height: 22px;
-	padding-top: 6px;
+	padding-top: var(--textfield-spacing-x);
 	overflow: hidden;
 	justify-content: space-between;
 	opacity: 0;
@@ -186,6 +222,7 @@
 	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;
 }
@@ -214,3 +251,55 @@
 .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

@@ -1,15 +1,24 @@
 <script lang="ts">
-	import Icon from '../icon/icon.svelte';
+	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,
@@ -26,9 +35,14 @@
 		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);
@@ -76,17 +90,25 @@
 	});
 </script>
 
-{errorMessage}
 <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">
@@ -160,7 +182,7 @@
 			{#if counter || messageSuffix}
 				<div class="kit-message--append">
 					{#if counter}
-						{counterValue}/{max}
+						{counterValue}{max ? `/${max}` : ''}
 					{:else if messageSuffix}
 						{messageSuffix}
 					{/if}

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

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

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

@@ -1,10 +1,37 @@
 import type { Base } from '../../internal/types.js';
+import type { Snippet } from 'svelte';
 export interface TextfieldProps extends Base {
-    is?: 'div';
+    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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.0.0-insiders.b9305c0",
+	"version": "0.0.0-insiders.baf0558",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"