lapikit 0.5.9 → 0.6.1

package/dist/@legacy/components/appbar/appbar.css

@@ -1,38 +0,0 @@
-.kit-appbar {
-	--appbar-padding-wrapper: var(--system-spacing) * 4;
-
-	display: flex;
-	align-items: center;
-	border-style: solid;
-	border-width: 1px;
-	border-radius: var(--appbar-shape);
-	color: var(--appbar-color, var(--kit-label-primary));
-	background-color: var(--appbar-background, var(--kit-background-grouped-tertiary));
-	border-color: var(--appbar-background, var(--kit-background-grouped-tertiary));
-}
-
-/* wrapper */
-.kit-appbar .kit-appbar--wrapper {
-	display: flex;
-	align-items: center;
-	flex-direction: row;
-	height: calc(100% - (var(--appbar-padding-wrapper) * 2));
-	width: calc(100% - (var(--appbar-padding-wrapper) * 2));
-	margin: 0 auto;
-}
-
-/* density */
-.kit-appbar[breakpoint]kit-appbar--density-default {
-	height: 4rem;
-	padding-inline: calc(var(--system-spacing) * 1.5);
-}
-
-.kit-appbar[breakpoint]kit-appbar--density-compact {
-	height: 3.5rem;
-	padding-inline: calc(var(--system-spacing) * 0.75);
-}
-
-.kit-appbar[breakpoint]kit-appbar--density-comfortable {
-	height: 4.5rem;
-	padding-inline: calc(var(--system-spacing) * 2.25);
-}

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

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

package/dist/@legacy/components/appbar/appbar.svelte.d.ts

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

package/dist/@legacy/components/appbar/types.d.ts

@@ -1,15 +0,0 @@
-import type { Component } from '../../internal/types/index.js';
-type Density = 'compact' | 'comfortable' | 'default';
-export interface AppbarProps extends Component {
-    is?: 'div' | 'header' | 'nav';
-    rounded?: string;
-    density?: Density | {
-        [key: string]: Density;
-    };
-    dark?: boolean;
-    light?: boolean;
-    color?: string;
-    background?: string;
-    classContent?: string | string[] | undefined;
-}
-export {};

package/dist/@legacy/components/appbar/types.js

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

package/dist/@legacy/components/aspect-ratio/aspect-ratio.css

@@ -1,19 +0,0 @@
-.kit-aspect-ratio {
-	display: flex;
-	flex: 1 0 auto;
-	max-height: 100%;
-	max-width: 100%;
-	overflow: hidden;
-	position: relative;
-}
-
-.kit-aspect-ratio--inline {
-	display: inline-flex;
-	flex: 0 0 auto;
-}
-
-.kit-aspect-ratio--sizer {
-	flex: 1 0 0px;
-	transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-	pointer-events: none;
-}

package/dist/@legacy/components/aspect-ratio/aspect-ratio.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { AspectRationProps } from './types.js';
-	let { children, aspectRatio, inline, ...rest }: AspectRationProps = $props();
-
-	let paddingBottom = $state(0);
-
-	$effect.pre(() => {
-		if (aspectRatio) {
-			const [width, height] = aspectRatio.split('/').map(Number);
-			paddingBottom = (height / width) * 100;
-		}
-	});
-
-	$effect(() => {
-		if (aspectRatio) {
-			const [width, height] = aspectRatio.split('/').map(Number);
-			paddingBottom = (height / width) * 100;
-		}
-	});
-</script>
-
-<div {...rest} class={['kit-aspect-ratio', inline && 'kit-aspect-ratio--inline', rest.class]}>
-	<div class="kit-aspect-ratio--sizer" style={`padding-bottom: ${paddingBottom}%;`}></div>
-	{@render children?.()}
-</div>

package/dist/@legacy/components/aspect-ratio/aspect-ratio.svelte.d.ts

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

package/dist/@legacy/components/aspect-ratio/types.d.ts

@@ -1,5 +0,0 @@
-import type { Component } from '../../internal/types/index.js';
-export interface AspectRationProps extends Component {
-    aspectRatio?: string;
-    inline?: boolean;
-}

package/dist/@legacy/components/aspect-ratio/types.js

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

package/dist/@legacy/components/avatar/avatar.css

@@ -1,102 +0,0 @@
-.kit-avatar {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	white-space: nowrap;
-	padding-top: var(--avatar-spacing-x);
-	padding-bottom: var(--avatar-spacing-x);
-	padding-right: var(--avatar-spacing-y);
-	padding-left: var(--avatar-spacing-y);
-	border-width: 1px;
-	border-style: solid;
-	border-radius: var(--avatar-shape, var(--system-shape-full));
-	color: var(--avatar-color, var(--kit-label-primary));
-	background-color: var(--avatar-background, var(--kit-background-secondary));
-	border-color: var(--avatar-background, var(--kit-background-secondary));
-}
-
-.kit-avatar.kit-avatar--image {
-	position: relative;
-	overflow: hidden;
-}
-
-.kit-avatar.kit-avatar--image img {
-	position: relative;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-
-/* size */
-.kit-avatar[breakpoint]kit-avatar--size-xs {
-	--avatar-height: 1.75rem;
-	--avatar-multiplier-y: 2;
-	font-size: 0.75rem;
-}
-
-.kit-avatar[breakpoint]kit-avatar--size-sm {
-	--avatar-height: 2rem;
-	--avatar-multiplier-y: 3;
-	font-size: 0.875rem;
-}
-
-.kit-avatar[breakpoint]kit-avatar--size-md {
-	--avatar-height: 2.25rem;
-	--avatar-multiplier-y: 4;
-	font-size: 0.875rem;
-}
-
-.kit-avatar[breakpoint]kit-avatar--size-lg {
-	--avatar-height: 2.5rem;
-	--avatar-multiplier-y: 5;
-	font-size: 1rem;
-}
-
-.kit-avatar[breakpoint]kit-avatar--size-xl {
-	--avatar-height: 2.75rem;
-	--avatar-multiplier-y: 6;
-	font-size: 1.125rem;
-}
-
-/* density */
-.kit-avatar[breakpoint]kit-avatar--density-default {
-	height: calc(var(--avatar-height));
-	width: calc(var(--avatar-height));
-	--avatar-spacing-x: 0;
-	--avatar-spacing-y: 0;
-}
-
-.kit-avatar[breakpoint]kit-avatar--density-compact {
-	height: calc(var(--avatar-height) - 0.25rem);
-	width: calc(var(--avatar-height) - 0.25rem);
-	--avatar-spacing-x: 0;
-	--avatar-spacing-y: 0;
-}
-
-.kit-avatar[breakpoint]kit-avatar--density-comfortable {
-	height: calc(var(--avatar-height) + 0.25rem);
-	width: calc(var(--avatar-height) + 0.25rem);
-	--avatar-spacing-x: 0;
-	--avatar-spacing-y: 0;
-}
-
-/* variant */
-.kit-avatar[breakpoint]kit-avatar--variant-outline {
-	--avatar-color: var(--base, var(--kit-background-grouped-tertiary));
-	background-color: transparent;
-	border: 1px solid currentColor;
-}
-
-.kit-avatar[breakpoint]kit-avatar--variant-text {
-	--avatar-color: var(--base, var(--kit-background-grouped-tertiary));
-	background-color: transparent;
-	border-color: transparent;
-}
-
-.kit-avatar[breakpoint]kit-avatar--variant-dash {
-	--avatar-color: var(--base, var(--kit-background-grouped-tertiary));
-	background-color: transparent;
-	border: 1px dashed currentColor;
-}

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

@@ -1,46 +0,0 @@
-<script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { AvatarProps } from './types.js';
-	let {
-		children,
-		ref = $bindable(),
-		light,
-		dark,
-		size = 'md',
-		rounded,
-		alt,
-		background,
-		color,
-		src,
-		variant,
-		density = 'default',
-		...rest
-	}: AvatarProps = $props();
-
-	const assets = getAssets();
-</script>
-
-<svelte:element
-	this={'div'}
-	bind:this={ref}
-	{...rest}
-	class={[
-		'kit-avatar',
-		light && 'light',
-		dark && 'dark',
-		src && 'kit-avatar--image',
-		size && assets.className('avatar', 'size', size),
-		variant && assets.className('avatar', 'variant', variant),
-		density && assets.className('avatar', 'density', density),
-		rest.class
-	]}
-	style:--avatar-background={assets.color(background)}
-	style:--avatar-color={assets.color(color)}
-	style:--avatar-shape={assets.shape(rounded)}
->
-	{#if src}
-		<img {src} {alt} />
-	{:else}
-		{@render children?.()}
-	{/if}
-</svelte:element>

package/dist/@legacy/components/avatar/avatar.svelte.d.ts

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

package/dist/@legacy/components/avatar/types.d.ts

@@ -1,22 +0,0 @@
-import type { Component } from '../../internal/types/index.js';
-type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-type AvatarDensity = 'compact' | 'comfortable' | 'default';
-type AvatarVariant = 'outline' | 'text' | 'dash';
-export interface AvatarProps extends Component {
-    ref?: HTMLElement | null;
-    dark?: boolean;
-    light?: boolean;
-    color?: string;
-    background?: string;
-    src?: string;
-    size?: AvatarSize | {
-        [key: string]: AvatarSize;
-    };
-    variant?: AvatarVariant | {
-        [key: string]: AvatarVariant;
-    };
-    density?: AvatarDensity | {
-        [key: string]: AvatarDensity;
-    };
-}
-export {};

package/dist/@legacy/components/avatar/types.js

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

package/dist/@legacy/components/button/button.css

@@ -1,240 +0,0 @@
-.kit-button {
-	position: relative;
-	cursor: pointer;
-	border: none;
-	outline: none;
-	padding-top: var(--button-spacing-x);
-	padding-bottom: var(--button-spacing-x);
-	padding-right: var(--button-spacing-y);
-	padding-left: var(--button-spacing-y);
-	border-radius: var(--button-shape, var(--system-shape-md));
-	color: var(--button-color, var(--kit-label-primary));
-	font-weight: 500;
-	text-decoration: none;
-}
-
-.kit-button,
-.kit-button .kit-button-content,
-.kit-button .kit-button-append,
-.kit-button .kit-button-prepend,
-.kit-button .kit-button-loading {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	white-space: nowrap;
-	gap: calc(var(--system-spacing) * var(--button-multiplier-gap));
-	font-size: calc(var(--system-spacing) * var(--button-multiplier-font-size));
-}
-
-.kit-button::after {
-	content: '';
-	position: absolute;
-	inset: 0;
-	background-color: currentColor;
-	opacity: 0;
-	transition: opacity 150ms ease;
-	pointer-events: none;
-	border-radius: inherit;
-}
-.kit-button:hover::after {
-	opacity: 0.08;
-}
-.kit-button:active::after {
-	opacity: 0.12;
-}
-.kit-button:focus-visible::after {
-	opacity: 0.12;
-}
-
-/* size */
-.kit-button[breakpoint]kit-button--size-xs {
-	--button-multiplier-x: 12;
-	--button-multiplier-y: 2;
-	--button-multiplier-gap: 2;
-	--button-multiplier-font-size: 6;
-}
-.kit-button[breakpoint]kit-button--size-xs .kit-icon[class*='kit-icon--size-md'] {
-	--icon-multiplier-parent-size: 7;
-}
-
-.kit-button[breakpoint]kit-button--size-sm {
-	--button-multiplier-x: 16;
-	--button-multiplier-y: 3;
-	--button-multiplier-gap: 4;
-	--button-multiplier-font-size: 7;
-}
-.kit-button[breakpoint]kit-button--size-sm .kit-icon[class*='kit-icon--size-md'] {
-	--icon-multiplier-parent-size: 8;
-}
-
-.kit-button[breakpoint]kit-button--size-md {
-	--button-multiplier-x: 20;
-	--button-multiplier-y: 4;
-	--button-multiplier-gap: 4;
-	--button-multiplier-font-size: 8;
-}
-.kit-button[breakpoint]kit-button--size-md .kit-icon[class*='kit-icon--size-md'] {
-	--icon-multiplier-parent-size: 9;
-}
-
-.kit-button[breakpoint]kit-button--size-lg {
-	--button-multiplier-x: 24;
-	--button-multiplier-y: 5;
-	--button-multiplier-gap: 4;
-	--button-multiplier-font-size: 9;
-}
-.kit-button[breakpoint]kit-button--size-lg .kit-icon[class*='kit-icon--size-md'] {
-	--icon-multiplier-parent-size: 10;
-}
-
-.kit-button[breakpoint]kit-button--size-xl {
-	--button-multiplier-x: 28;
-	--button-multiplier-y: 6;
-	--button-multiplier-gap: 5;
-	--button-multiplier-font-size: 10;
-}
-.kit-button[breakpoint]kit-button--size-xl .kit-icon[class*='kit-icon--size-md'] {
-	--icon-multiplier-parent-size: 11;
-}
-
-/* density */
-.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-default {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x));
-	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--system-spacing) * var(--button-multiplier-y));
-}
-.kit-button.kit-button--icon[breakpoint]kit-button--density-default {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x));
-	width: calc(var(--system-spacing) * var(--button-multiplier-x));
-	--button-spacing-x: 0;
-	--button-spacing-y: 0;
-}
-
-.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-compact {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x) - 0.25rem);
-	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--system-spacing) * var(--button-multiplier-y) - 0.25rem);
-}
-.kit-button.kit-button--icon[breakpoint]kit-button--density-compact {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x) - 0.25rem);
-	width: calc(var(--system-spacing) * var(--button-multiplier-x) - 0.25rem);
-	--button-spacing-x: 0;
-	--button-spacing-y: 0;
-}
-
-.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-comfortable {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x) + 0.25rem);
-	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--system-spacing) * var(--button-multiplier-y) + 0.25rem);
-}
-.kit-button.kit-button--icon[breakpoint]kit-button--density-comfortable {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x) + 0.25rem);
-	width: calc(var(--system-spacing) * var(--button-multiplier-x) + 0.25rem);
-	--button-spacing-x: 0;
-	--button-spacing-y: 0;
-}
-
-/* variant */
-.kit-button[breakpoint]kit-button--variant-filled {
-	background-color: var(--button-background, var(--kit-background-grouped-primary));
-}
-
-.kit-button[breakpoint]kit-button--variant-outline {
-	--button-color: var(--on, var(--kit-label-primary));
-	background-color: var(--button-background, var(--kit-background-grouped-primary));
-}
-.kit-button[breakpoint]kit-button--variant-outline::before {
-	content: '';
-	position: absolute;
-	inset: 0;
-	border: 1px solid currentColor;
-	pointer-events: none;
-	border-radius: inherit;
-}
-
-.kit-button[breakpoint]kit-button--variant-text {
-	--button-color: var(--base, var(--kit-label-primary));
-	background-color: transparent;
-	border: none;
-}
-
-/* state */
-.kit-button.kit-button--info[class*='button--variant-filled'] {
-	--on: var(--kit-on-info);
-	--base: var(--kit-accent-info);
-}
-.kit-button.kit-button--info[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-accent-info);
-}
-.kit-button.kit-button--success[class*='button--variant-filled'] {
-	--on: var(--kit-on-success);
-	--base: var(--kit-accent-successs);
-}
-.kit-button.kit-button--success[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-accent-successs);
-}
-.kit-button.kit-button--warning[class*='button--variant-filled'] {
-	--on: var(--kit-on-warning);
-	--base: var(--kit-accent-warning);
-}
-.kit-button.kit-button--warning[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-accent-warning);
-}
-.kit-button.kit-button--error[class*='button--variant-filled'] {
-	--on: var(--kit-on-error);
-	--base: var(--kit-accent-destructive);
-}
-.kit-button.kit-button--error[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-accent-destructive);
-}
-
-/* events */
-.kit-button[class*='button--variant-filled']:active,
-.kit-button.kit-button--active[class*='button--variant-filled'] {
-	background-color: color-mix(in oklab, var(--button-background) 90%, var(--kit-state-shadow));
-}
-.kit-button.kit-button--active[class*='button--variant-']:not([class*='variant-filled']):active,
-.kit-button.kit-button--active[class*='button--variant-']:not([class*='variant-filled']) {
-	background-color: color-mix(in oklab, currentColor 15%, transparent);
-}
-
-/* icon */
-.kit-button i::before,
-.kit-button .kit-icon {
-	--base-parent: var(--button-color);
-}
-
-/* disabled */
-.kit-button.kit-button--disabled,
-.kit-button[disabled],
-.kit-button.kit-button--loading {
-	pointer-events: none;
-	user-select: none;
-	cursor: default;
-}
-.kit-button[class*='button--variant-filled'].kit-button--disabled {
-	color: color-mix(in oklab, var(--button-color) 40%, transparent) !important;
-	background-color: color-mix(in oklab, var(--button-background) 70%, transparent) !important;
-}
-.kit-button[class*='button--variant-filled'].kit-button--disabled i:before {
-	color: color-mix(in oklab, var(--button-color) 40%, transparent) !important;
-}
-.kit-button[class*='button--variant-']:not([class*='variant-filled']).kit-button--disabled,
-.kit-button[class*='button--variant-']:not([class*='variant-filled']).kit-button--disabled
-	i::before {
-	color: color-mix(in oklab, var(--button-background) 40%, transparent) !important;
-}
-
-/* loading */
-.kit-button.kit-button--loading > .kit-button-content,
-.kit-button.kit-button--loading > .kit-button-append,
-.kit-button.kit-button--loading > .kit-button-prepend {
-	visibility: hidden;
-}
-.kit-button.kit-button--loading > .kit-button-loading {
-	position: absolute;
-	min-width: fit-content;
-}
-.kit-button.kit-button--loading > .kit-button-loading .kit-icon-load {
-	animation: icon-rotate 1s ease-out infinite;
-}

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

@@ -1,102 +0,0 @@
-<script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { ButtonProps } from './types.js';
-
-	// external
-	import { Icon } from '../index.js';
-	import LoadingFill from '../../assets/icons/loading-fill.svelte';
-	import { ripple } from '../../internal/core/animations/ripple.js';
-
-	let {
-		children,
-		prepend,
-		append,
-		ref = $bindable(),
-		is = 'button',
-		href,
-		dark,
-		light,
-		active,
-		variant = 'filled',
-		error,
-		info,
-		success,
-		warning,
-		density = 'default',
-		disabled,
-		size = 'md',
-		type = 'button',
-		background,
-		color,
-		loading,
-		rounded,
-		icon,
-		load,
-		noRipple,
-		...rest
-	}: ButtonProps = $props();
-
-	const assets = getAssets();
-</script>
-
-<svelte:element
-	this={href ? 'a' : is}
-	bind:this={ref}
-	{...rest}
-	href={href && !disabled ? href : undefined}
-	class={[
-		'kit-button',
-		light && 'light',
-		dark && 'dark',
-		size && assets.className('button', 'size', size),
-		variant && assets.className('button', 'variant', variant),
-		density && assets.className('button', 'density', density),
-		error && 'kit-button--error',
-		info && 'kit-button--info',
-		success && 'kit-button--success',
-		warning && 'kit-button--warning',
-		disabled && 'kit-button--disabled',
-		active && 'kit-button--active',
-		loading && 'kit-button--loading',
-		icon && 'kit-button--icon',
-		rest.class
-	]}
-	tabindex={href && disabled ? -1 : 0}
-	disabled={href ? undefined : disabled}
-	type={href ? undefined : type}
-	use:ripple={{
-		component: 'button',
-		disabled: noRipple || disabled
-	}}
-	style:--button-background={assets.color(background)}
-	style:--button-color={assets.color(color)}
-	style:--button-shape={assets.shape(rounded)}
->
-	{#if loading}
-		<div class="kit-button-loading">
-			{#if load}
-				{@render load?.()}
-			{:else}
-				<Icon class="kit-icon-load">
-					<LoadingFill />
-				</Icon>
-			{/if}
-		</div>
-	{/if}
-
-	{#if prepend}
-		<div class="kit-button-prepend">
-			{@render prepend?.()}
-		</div>
-	{/if}
-
-	<div class="kit-button-content">
-		{@render children?.()}
-	</div>
-
-	{#if append}
-		<div class="kit-button-append">
-			{@render append?.()}
-		</div>
-	{/if}
-</svelte:element>

package/dist/@legacy/components/button/button.svelte.d.ts

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