lapikit 0.5.9 → 0.6.1

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

@@ -1,73 +0,0 @@
-<script lang="ts">
-	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 {
-		open = $bindable(),
-		children,
-		activator,
-		dark,
-		light,
-		rounded,
-		position,
-		color,
-		background,
-		...rest
-	}: PopoverProps = $props();
-
-	const positionAxis = getPositions();
-	const assets = getAssets();
-
-	let ref: HTMLElement | null = $state(null);
-	let refActivator: HTMLElement | null = $state(null);
-	let axis = $state({ x: 0, y: 0 });
-	let innerHeight = $state(0);
-	let innerWidth = $state(0);
-	let scrollX = $state(0);
-	let scrollY = $state(0);
-
-	axis = positionAxis?.values;
-
-	let model: ModelPopoverProps = {
-		toggle: (element) => handleToggle(element)
-	};
-
-	const handleToggle = (element: HTMLElement | null) => {
-		if (element === null) return;
-		refActivator = element;
-		open = !open;
-	};
-
-	$effect(() => {
-		if (
-			open &&
-			ref &&
-			refActivator &&
-			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
-		) {
-			positionAxis.update(refActivator, ref, position);
-		}
-	});
-</script>
-
-<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
-
-{@render activator?.(model)}
-
-{#if open}
-	<div
-		bind:this={ref}
-		{...rest}
-		role="menu"
-		class={['kit-popover-content', light && 'light', dark && 'dark', rest.class]}
-		style={`transform: translate(${axis.x}px, ${axis.y}px);`}
-		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?.()}
-	</div>
-{/if}

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

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

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

@@ -1,20 +0,0 @@
-import type { Component } from '../../internal/types/index.js';
-import type { Snippet } from 'svelte';
-export type PositionElement = {
-    x: number;
-    y: number;
-    location: string | null;
-};
-export interface PopoverProps extends Component {
-    open?: boolean;
-    dark?: boolean;
-    light?: boolean;
-    rounded?: string;
-    position?: 'top' | 'bottom' | 'left' | 'right';
-    color?: string;
-    background?: string;
-    activator?: Snippet<[ModelPopoverProps]>;
-}
-export type ModelPopoverProps = {
-    toggle: (element: HTMLElement | null) => void;
-};

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

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

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

@@ -1,42 +0,0 @@
-.kit-separator {
-	display: block;
-	flex: 1 1 100%;
-	height: 0px;
-	max-height: 0px;
-	opacity: var(--separator-opacity, 0.12);
-	transition: inherit;
-	border-color: var(--separator-color, var(--kit-label-primary));
-	border-style: solid;
-}
-
-.kit-separator--inset:not(.kit-separator--orientation-vertical) {
-	max-width: calc(100% - 4.5rem);
-	margin-inline-start: 4.5rem;
-}
-
-.kit-separator--inset.kit-separator--orientation-vertical {
-	margin-bottom: 0.5rem;
-	margin-top: 0.5rem;
-	max-height: calc(100% - 1rem);
-}
-
-.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/@legacy/components/separator/separator.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { SeparatorProps } from './types.js';
-
-	let {
-		is = 'hr',
-		light,
-		dark,
-		inset,
-		thickness,
-		orientation = 'horizontal',
-		opacity,
-		color,
-		...rest
-	}: SeparatorProps = $props();
-
-	const assets = getAssets();
-</script>
-
-<svelte:element
-	this={is}
-	{...rest}
-	class={[
-		'kit-separator',
-		light && 'light',
-		dark && 'dark',
-		inset && 'kit-separator--inset',
-		orientation && assets.className('separator', 'orientation', orientation),
-		rest.class
-	]}
-	aria-orientation={typeof orientation === 'string' ? orientation : undefined}
-	role="separator"
-	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/@legacy/components/separator/separator.svelte.d.ts

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

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

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

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

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

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

@@ -1,3 +0,0 @@
-.kit-spacer {
-	flex-grow: 1;
-}

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

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import type { SpacerProps } from './types.js';
-
-	let { is = 'div', ...rest }: SpacerProps = $props();
-</script>
-
-<svelte:element this={is} {...rest} class={['kit-spacer', rest.class]}> </svelte:element>

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

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

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

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

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

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

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

@@ -1,298 +0,0 @@
-.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);
-}