lapikit 0.7.3 → 0.7.5

package/dist/components/btn/btn.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { useClassName, useElevation, useStyles } from '../../utils';
-	import { makeComponentProps } from '../../html-mapped';
+	import { useComponentAttrs, useElevation } from '../../utils';
 	import { ripple } from '../../animations';
 	import type { ButtonProps } from './btn.types.js';
 
@@ -8,8 +7,8 @@
 		ref = $bindable(),
 		is = 'button',
 		children,
-		class: className = '',
-		style: styleAttr = '',
+		class: className,
+		style: styleAttr,
 		's-class': sClass,
 		's-style': sStyle,
 		variant = 'filled',
@@ -34,485 +33,452 @@
 		icon,
 		elevation,
 		color,
-		background,
 		...rest
 	}: ButtonProps = $props();
 
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
+	let attrs = $derived(
+		useComponentAttrs('kit-btn', { className, sClass, styleAttr, sStyle, color, active }, rest)
 	);
-
 	let elevationState = $derived(useElevation(elevation));
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-btn',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	const isInput = $derived(!!input);
-	const isDisabled = $derived(!!disabled);
-	const tag = $derived((href && 'a') || (isInput && 'input') || is || 'button');
-	const inputWrapperTag = $derived(type === 'checkbox' || type === 'radio' ? 'label' : 'div');
-	const resolvedHref = $derived(isDisabled ? undefined : href);
-	const resolvedDisabled = $derived((tag === 'button' && isDisabled) || undefined);
-
-	const resolvedType = $derived(() => {
-		if (tag !== 'button') return type;
-		return type ?? 'button';
-	});
-
-	let resolvedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-btn-fg:${color && `var(--kit-color-${color})`}` : '',
-			background ? `--kit-btn-bg:${background && `var(--kit-color-${background})`}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
+	let hasOutline = $derived(variant === 'outline' || variant === 'surface');
+
+	let isInput = $derived(!!input || is === 'input');
+	let isDisabled = $derived(!!disabled);
+	let tag = $derived<'button' | 'a' | 'label' | 'div'>(
+		isInput
+			? type === 'checkbox' || type === 'radio'
+				? 'label'
+				: 'div'
+			: href || is === 'a'
+				? 'a'
+				: 'button'
 	);
+	let resolvedHref = $derived(tag === 'a' && !isDisabled ? href : undefined);
+	let resolvedType = $derived(tag === 'button' ? (type ?? 'button') : undefined);
+	let resolvedDisabled = $derived(tag === 'button' ? isDisabled : undefined);
+	let resolvedTabIndex = $derived(tag === 'a' && isDisabled ? -1 : undefined);
 </script>
 
-{#if isInput}
-	<svelte:element
-		this={inputWrapperTag}
-		bind:this={ref}
-		class={componentClass}
-		style={resolvedStyle}
-		data-size={size}
-		data-variant={variant}
-		data-loading={loading}
-		data-active={active}
-		data-disabled={isDisabled}
-		data-density={density}
-		data-rounded={rounded}
-		aria-busy={disabled}
-		aria-disabled={isDisabled || undefined}
-		data-block={block}
-		data-wide={wide}
-		data-icon={icon}
-		data-elevation={elevationState.base}
-		data-elevation-hover={elevationState.hover}
-		data-elevation-active={elevationState.active}
-		use:ripple={{
-			component: 'btn',
-			disabled: noRipple || disabled
-		}}
-	>
-		{#if variant === 'outline'}
-			<span class="outline"></span>
-		{/if}
+<svelte:element
+	this={tag}
+	bind:this={ref}
+	class={attrs.class}
+	style={attrs.style}
+	href={resolvedHref}
+	type={resolvedType}
+	disabled={resolvedDisabled}
+	tabindex={resolvedTabIndex}
+	data-variant={variant}
+	data-size={size}
+	data-density={density}
+	data-rounded={rounded}
+	data-elevation={elevationState.base}
+	data-elevation-hover={elevationState.hover}
+	data-elevation-active={elevationState.active}
+	data-interactive={true}
+	data-active={active}
+	data-disabled={isDisabled}
+	data-loading={loading}
+	data-block={block}
+	data-wide={wide}
+	data-icon={icon}
+	aria-busy={loading || undefined}
+	aria-disabled={isDisabled || undefined}
+	use:ripple={{
+		component: 'btn',
+		disabled: noRipple || isDisabled
+	}}
+	{...isInput ? {} : attrs.rest}
+>
+	{#if hasOutline}
+		<span class="outline"></span>
+	{/if}
+
+	{#if isInput}
 		<input
-			{...restProps}
+			{...attrs.rest}
+			class="kit-btn__input"
+			data-ripple-host
 			type={type || 'button'}
 			{checked}
 			{value}
-			aria-label={String(label || value)}
+			aria-label={label || (value != null ? String(value) : undefined)}
 			disabled={isDisabled}
 		/>
-		{#if loading}
-			<span class="spinner">...</span>
-		{/if}
-	</svelte:element>
-{:else}
-	<svelte:element
-		this={tag}
-		bind:this={ref}
-		class={componentClass}
-		style={resolvedStyle}
-		type={resolvedType()}
-		href={resolvedHref}
-		data-size={size}
-		data-variant={variant}
-		data-loading={loading}
-		data-active={active}
-		data-disabled={isDisabled}
-		data-density={density}
-		data-rounded={rounded}
-		disabled={resolvedDisabled}
-		aria-busy={disabled}
-		aria-disabled={isDisabled || undefined}
-		data-block={block}
-		data-wide={wide}
-		data-icon={icon}
-		data-elevation={elevationState.base}
-		data-elevation-hover={elevationState.hover}
-		data-elevation-active={elevationState.active}
-		use:ripple={{
-			component: 'btn',
-			disabled: noRipple || disabled
-		}}
-		{...restProps}
-	>
-		{#if variant === 'outline'}
-			<span class="outline"></span>
-		{/if}
-
+	{:else}
 		<span class="kit-btn__inner">
 			{#if prepend}
-				<span class="kit-btn__prepend">
-					{@render prepend?.()}
-				</span>
+				<span class="kit-btn__prepend">{@render prepend()}</span>
+			{/if}
+			{#if children}
+				<span class="kit-btn__content">{@render children()}</span>
 			{/if}
-			<span class="kit-btn__content">
-				{@render children?.()}
-			</span>
 			{#if append}
-				<span class="kit-btn__append">
-					{@render append?.()}
-				</span>
+				<span class="kit-btn__append">{@render append()}</span>
 			{/if}
 		</span>
-
-		{#if loading}
-			<span class="spinner">
-				{#if load}
-					{@render load?.()}
-				{:else}
-					...
-				{/if}
-			</span>
-		{/if}
-	</svelte:element>
-{/if}
-
-<style>
-	input {
-		border: 0;
-		padding: 0;
-		background: transparent;
-		color: inherit;
-		cursor: pointer;
-	}
-	/* typography consistency */
-	button,
-	input,
-	select,
-	textarea {
-		font: inherit;
-		color: inherit;
-	}
-
-	/* remove native button styles */
-	button {
-		appearance: none;
-		background: none;
-		border: none;
-	}
-
-	.kit-btn {
-		position: relative;
-		display: inline-flex;
-		box-sizing: border-box;
-		align-items: center;
-		justify-content: center;
-		font-family: var(--kit-font);
-		background: var(--kit-btn-bg);
-		color: var(--kit-btn-fg);
-		height: calc(var(--kit-btn-h) + var(--kit-btn-density-offset) / 2);
-		padding-inline: calc(var(--kit-btn-p) + var(--kit-btn-density-offset) / 2);
-		border-radius: var(--kit-btn-radius);
-		text-decoration: none;
-		white-space: nowrap;
-		user-select: none;
-		cursor: pointer;
-		border: 0;
-		transition:
-			background 150ms ease,
-			transform 50ms ease;
-	}
-
-	.kit-btn:hover {
-		background: var(--kit-btn-hover-bg);
-		color: var(--kit-btn-fg);
-		text-decoration: var(--kit-btn-decoration);
-		translate: 0 -1px;
-	}
-
-	.kit-btn:has(> :is(input[type='checkbox'], input[type='radio']):checked) {
-		background: var(--kit-btn-active-bg);
-		color: var(--kit-btn-fg);
-		text-decoration: var(--kit-btn-decoration);
-	}
-
-	.kit-btn:has(> :is(input[type='checkbox'], input[type='radio']):checked):hover {
-		background: var(--kit-btn-hover-bg);
-		color: var(--kit-btn-fg);
-		text-decoration: var(--kit-btn-decoration);
-	}
-
-	.kit-btn:active,
-	.kit-btn[data-active='true'] {
-		background: var(--kit-btn-active-bg);
-		color: var(--kit-btn-fg);
-		text-decoration: var(--kit-btn-decoration);
-		transform: translateY(1px);
-	}
-
-	.kit-btn[data-active='true']:hover {
-		background: var(--kit-btn-hover-bg);
-		color: var(--kit-btn-fg);
-		text-decoration: var(--kit-btn-decoration);
-	}
-
-	:is(.kit-btn:focus-visible, .kit-btn:has(> input:focus-visible)) {
-		outline: 2px solid var(--kit-color-focus);
-		outline-offset: 2px;
-	}
-
-	.kit-btn > input:focus-visible {
-		outline: none;
-		box-shadow: none;
-	}
-
-	.kit-btn > :is(input[type='checkbox'], input[type='radio']) {
-		appearance: none;
-		margin: 0;
-		cursor: pointer;
-	}
-
-	.kit-btn > :is(input[type='checkbox'], input[type='radio']):after {
-		content: attr(aria-label);
-		cursor: pointer;
-	}
-
-	.kit-btn[data-wide='true'] {
-		width: 100%;
-		max-width: 16rem;
-	}
-
-	.kit-btn__inner {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		gap: var(--kit-btn-gap);
-		line-height: 1;
-	}
-
-	.kit-btn__content,
-	.kit-btn__prepend,
-	.kit-btn__append {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		line-height: 1;
-	}
-
-	.kit-btn__content :global(.kit-icon),
-	.kit-btn__prepend :global(.kit-icon),
-	.kit-btn__append :global(.kit-icon) {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		vertical-align: middle;
-	}
-
-	.kit-btn__content :global(svg),
-	.kit-btn__prepend :global(svg),
-	.kit-btn__append :global(svg),
-	.kit-btn__content :global(img),
-	.kit-btn__prepend :global(img),
-	.kit-btn__append :global(img) {
-		display: block;
-	}
-
-	.kit-btn[data-loading='true'] .kit-btn__inner,
-	.kit-btn[data-loading='true'] input {
-		opacity: 0;
-	}
-
-	.kit-btn[data-loading='true'] {
-		pointer-events: none;
-		user-select: none;
-		cursor: pointer;
-	}
-
-	.spinner {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.kit-btn[data-block='true'] {
-		display: flex;
-		width: 100%;
-	}
-
-	.kit-btn[data-icon='true'] {
-		width: max(28px, calc(var(--kit-btn-h) + var(--kit-btn-density-offset) / 2));
-		min-width: max(28px, calc(var(--kit-btn-h) + var(--kit-btn-density-offset) / 2));
-		padding-inline: 0;
-	}
-
-	.kit-btn[data-icon='true'] .kit-btn__inner {
-		gap: 0;
-	}
-
-	.kit-btn[data-disabled='true'] {
-		pointer-events: none;
-		background: color-mix(in oklab, var(--kit-btn-bg), transparent 70%);
-		color: color-mix(in oklab, var(--kit-btn-fg), transparent 45%);
-		user-select: none;
-		cursor: not-allowed;
-	}
-
-	.kit-btn[data-disabled='true'] :global(.kit-icon) {
-		color: color-mix(in oklab, var(--kit-btn-fg), transparent 45%) !important;
-		--kit-icon-color: color-mix(in oklab, var(--kit-btn-fg), transparent 45%) !important;
-	}
-
-	.kit-btn[data-disabled='true'] :global(.kit-icon img),
-	.kit-btn[data-disabled='true'] :global(.kit-icon .kit-icon__mask) {
-		opacity: 0.7;
-		filter: grayscale(0.2);
-	}
-
-	.kit-btn[data-disabled='true'] > input {
-		cursor: not-allowed;
-	}
-
-	/**
-	* size
-	* @link nothing...
-	*/
-	.kit-btn[data-size='xs'] {
-		--kit-btn-h: 24px;
-		--kit-btn-p: 8px;
-		--kit-btn-gap: var(--kit-space-compact);
-		--kit-btn-font: 12px;
-	}
-	.kit-btn[data-size='xs'] :global(.kit-icon:not([data-size])) {
-		--kit-icon-current-size: var(--kit-icon-size-xs);
-	}
-	.kit-btn[data-size='sm'] {
-		--kit-btn-h: 32px;
-		--kit-btn-p: 12px;
-		--kit-btn-gap: var(--kit-space-default);
-		--kit-btn-font: 13px;
-	}
-	.kit-btn[data-size='sm'] :global(.kit-icon:not([data-size])) {
-		--kit-icon-current-size: var(--kit-icon-size-sm);
-	}
-
-	.kit-btn[data-size='md'] {
-		--kit-btn-h: 40px;
-		--kit-btn-p: 16px;
-		--kit-btn-gap: var(--kit-space-default);
-		--kit-btn-font: 14px;
-	}
-	.kit-btn[data-size='md'] :global(.kit-icon:not([data-size])) {
-		--kit-icon-current-size: var(--kit-icon-size-md);
-	}
-
-	.kit-btn[data-size='lg'] {
-		--kit-btn-h: 48px;
-		--kit-btn-p: 20px;
-		--kit-btn-gap: var(--kit-space-default);
-		--kit-btn-font: 16px;
-	}
-	.kit-btn[data-size='lg'] :global(.kit-icon:not([data-size])) {
-		--kit-icon-current-size: var(--kit-icon-size-lg);
-	}
-
-	.kit-btn[data-size='xl'] {
-		--kit-btn-h: 56px;
-		--kit-btn-p: 24px;
-		--kit-btn-gap: var(--kit-space-comfortable);
-		--kit-btn-font: 17px;
-	}
-	.kit-btn[data-size='xl'] :global(.kit-icon:not([data-size])) {
-		--kit-icon-current-size: var(--kit-icon-size-xl);
-	}
-
-	/** 
-	 * density
-	 * @link no links
-	 */
-	.kit-btn[data-density='compact'] {
-		--kit-btn-density-offset: var(--kit-density-compact);
-	}
-	.kit-btn[data-density='default'] {
-		--kit-btn-density-offset: var(--kit-density-default);
-	}
-	.kit-btn[data-density='comfortable'] {
-		--kit-btn-density-offset: var(--kit-density-comfortable);
-	}
-
-	/** 
-	 * rounded
-	 * @link ...
-	 */
-	.kit-btn[data-rounded='0'] {
-		--kit-btn-radius: var(--kit-shape-none);
-	}
-	.kit-btn[data-rounded='xs'] {
-		--kit-btn-radius: var(--kit-shape-xs);
-	}
-	.kit-btn[data-rounded='sm'] {
-		--kit-btn-radius: var(--kit-shape-sm);
-	}
-	.kit-btn[data-rounded='md'] {
-		--kit-btn-radius: var(--kit-shape-md);
-	}
-	.kit-btn[data-rounded='lg'] {
-		--kit-btn-radius: var(--kit-shape-lg);
-	}
-	.kit-btn[data-rounded='xl'] {
-		--kit-btn-radius: var(--kit-shape-xl);
-	}
-	.kit-btn[data-rounded='full'] {
-		--kit-btn-radius: var(--kit-shape-full);
-	}
-
-	/** 
-	 * variant
-	 * @link no links...
-	 */
-	.kit-btn[data-variant='filled'] {
-		--kit-btn-bg: var(--kit-color-surface-2);
-		--kit-btn-fg: var(--kit-color-text);
-
-		--kit-btn-hover-bg: color-mix(in oklab, var(--kit-btn-bg), black 10%);
-		--kit-btn-active-bg: color-mix(in oklab, var(--kit-btn-bg), black 16%);
-	}
-	.kit-btn[data-variant='outline'] {
-		--kit-btn-bg: transparent;
-		--kit-btn-fg: var(--kit-color-text);
-		--kit-btn-bd: var(--kit-btn-fg);
-
-		--kit-btn-hover-bg: color-mix(in oklab, var(--kit-btn-fg), transparent 80%);
-		--kit-btn-active-bg: color-mix(in oklab, var(--kit-btn-fg), transparent 92%);
-	}
-	.kit-btn[data-variant='text'] {
-		--kit-btn-bg: transparent;
-		--kit-btn-fg: var(--kit-color-text);
-
-		--kit-btn-hover-bg: color-mix(in oklab, var(--kit-btn-fg), transparent 80%);
-		--kit-btn-active-bg: color-mix(in oklab, var(--kit-btn-fg), transparent 92%);
-	}
-	.kit-btn[data-variant='link'] {
-		--kit-btn-bg: transparent;
-		--kit-btn-fg: var(--kit-color-text);
-		--kit-btn-decoration: underline;
-
-		height: inherit;
-		padding: 0;
-	}
-
-	.kit-btn .outline {
-		--outline-color: var(--kit-btn-bd);
-	}
-</style>
+	{/if}
+
+	{#if loading}
+		<span class="kit-btn__spinner">
+			{#if load}
+				{@render load()}
+			{:else}
+				...
+			{/if}
+		</span>
+	{/if}
+</svelte:element>
+
+<style>:where(.kit-btn) {
+  --kit-btn-color: initial;
+  --kit-btn-on-color: initial;
+  --kit-btn-active-fg: initial;
+  --kit-btn-active-shade: initial;
+  --kit-btn-hover-fg: initial;
+  --kit-btn-pressed-fg: initial;
+  --kit-btn-bg: var(--kit-btn-color, var(--kit-color-surface-2));
+  --kit-btn-fg: var(--kit-btn-on-color, var(--kit-btn-contrast, var(--kit-color-text)));
+  --kit-btn-ink: var(--kit-btn-color, var(--kit-color-text));
+  --kit-btn-hover: color-mix(in oklab, var(--kit-btn-bg), var(--kit-btn-fg) 8%);
+  --kit-btn-pressed: color-mix(in oklab, var(--kit-btn-bg), var(--kit-btn-fg) 14%);
+  --kit-btn-soft: color-mix(in oklab, var(--kit-btn-bg) 16%, transparent);
+  --kit-btn-border: color-mix(in oklab, var(--kit-btn-bg), var(--kit-btn-fg) 20%);
+  --kit-btn-active: color-mix(
+  	in oklab,
+  	var(--kit-btn-color),
+  	var(--kit-btn-fg) var(--kit-btn-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-btn) {
+    --kit-btn-contrast: color(from var(--kit-btn-color) srgb-linear clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)/1);
+  }
+}
+:where(.kit-btn) {
+  --kit-btn-height: calc(var(--kit-btn-h) + var(--kit-btn-density-offset) / 2);
+}
+
+.kit-btn {
+  position: relative;
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  height: var(--kit-btn-height);
+  padding-inline: calc(var(--kit-btn-p) + var(--kit-btn-density-offset) / 2);
+  border: 0;
+  border-radius: var(--kit-btn-radius);
+  background-color: var(--kit-btn-bg);
+  color: var(--kit-btn-fg);
+  font: inherit;
+  font-family: var(--kit-font);
+  font-size: var(--kit-btn-font);
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+  transition-property: background-color, color, border-color, box-shadow;
+  transition-duration: var(--kit-animation-component);
+  transition-timing-function: ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-btn {
+    transition: none;
+  }
+}
+.kit-btn__inner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kit-btn-gap);
+  line-height: 1;
+}
+.kit-btn__content, .kit-btn__prepend, .kit-btn__append {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+.kit-btn__content :global(.kit-icon), .kit-btn__prepend :global(.kit-icon), .kit-btn__append :global(.kit-icon) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+.kit-btn__content :global(svg),
+.kit-btn__content :global(img), .kit-btn__prepend :global(svg),
+.kit-btn__prepend :global(img), .kit-btn__append :global(svg),
+.kit-btn__append :global(img) {
+  display: block;
+}
+.kit-btn__input {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.kit-btn__input:focus-visible {
+  outline: none;
+}
+.kit-btn__input:is([type=checkbox], [type=radio]) {
+  appearance: none;
+}
+.kit-btn__input:is([type=checkbox], [type=radio])::after {
+  content: attr(aria-label);
+}
+.kit-btn__spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.kit-btn:has(> .kit-btn__input:focus-visible) {
+  outline: 2px solid var(--kit-color-focus);
+  outline-offset: 2px;
+}
+.kit-btn[data-loading=true] {
+  pointer-events: none;
+}
+.kit-btn[data-loading=true] .kit-btn__inner,
+.kit-btn[data-loading=true] .kit-btn__input {
+  opacity: 0;
+}
+.kit-btn[data-block=true] {
+  display: flex;
+  width: 100%;
+}
+.kit-btn[data-wide=true] {
+  width: 100%;
+  max-width: 16rem;
+}
+.kit-btn[data-icon=true] {
+  width: max(1.75rem, var(--kit-btn-height));
+  min-width: max(1.75rem, var(--kit-btn-height));
+  padding-inline: 0;
+}
+.kit-btn[data-icon=true] .kit-btn__inner {
+  gap: 0;
+}
+
+/* native resets: no background here, it would beat the background of .kit-btn */
+button.kit-btn {
+  appearance: none;
+}
+
+/**
+ * size
+ * @link https://lapikit.dev/docs/components/button#size
+ */
+:where(.kit-btn[data-size=xs]) {
+  --kit-btn-h: 1.5rem;
+  --kit-btn-p: 0.5rem;
+  --kit-btn-gap: 0.25rem;
+  --kit-btn-font: 0.75rem;
+}
+:where(.kit-btn[data-size=xs]) :global(.kit-icon[data-size='default']) {
+  --kit-icon-current-size: var(--kit-icon-size-xs);
+}
+
+:where(.kit-btn[data-size=sm]) {
+  --kit-btn-h: 2rem;
+  --kit-btn-p: 0.75rem;
+  --kit-btn-gap: 0.375rem;
+  --kit-btn-font: var(--kit-font-xs);
+}
+:where(.kit-btn[data-size=sm]) :global(.kit-icon[data-size='default']) {
+  --kit-icon-current-size: var(--kit-icon-size-sm);
+}
+
+:where(.kit-btn[data-size=md]) {
+  --kit-btn-h: 2.5rem;
+  --kit-btn-p: 1rem;
+  --kit-btn-gap: 0.5rem;
+  --kit-btn-font: var(--kit-font-sm);
+}
+:where(.kit-btn[data-size=md]) :global(.kit-icon[data-size='default']) {
+  --kit-icon-current-size: var(--kit-icon-size-md);
+}
+
+:where(.kit-btn[data-size=lg]) {
+  --kit-btn-h: 3rem;
+  --kit-btn-p: 1.25rem;
+  --kit-btn-gap: 0.5625rem;
+  --kit-btn-font: var(--kit-font-lg);
+}
+:where(.kit-btn[data-size=lg]) :global(.kit-icon[data-size='default']) {
+  --kit-icon-current-size: var(--kit-icon-size-lg);
+}
+
+:where(.kit-btn[data-size=xl]) {
+  --kit-btn-h: 3.5rem;
+  --kit-btn-p: 1.5rem;
+  --kit-btn-gap: 0.625rem;
+  --kit-btn-font: var(--kit-font-xl);
+}
+:where(.kit-btn[data-size=xl]) :global(.kit-icon[data-size='default']) {
+  --kit-icon-current-size: var(--kit-icon-size-xl);
+}
+
+/**
+ * variant
+ * @link https://lapikit.dev/docs/components/button#variants
+ */
+:where(.kit-btn[data-variant=tonal]) {
+  --kit-btn-bg: color-mix(in oklab, var(--kit-btn-ink) 16%, transparent);
+  --kit-btn-fg: var(--kit-btn-ink);
+  --kit-btn-border: transparent;
+  --kit-btn-active: color-mix(in oklab, var(--kit-btn-ink) 28%, transparent);
+  --kit-btn-active-fg: var(--kit-btn-ink);
+}
+
+:where(.kit-btn[data-variant=outline]) {
+  --kit-btn-bg: transparent;
+  --kit-btn-fg: var(--kit-btn-ink);
+  --kit-btn-border: var(--kit-btn-color, var(--kit-color-border));
+  --kit-btn-active: color-mix(in oklab, var(--kit-btn-ink) 14%, transparent);
+  --kit-btn-active-fg: var(--kit-btn-ink);
+}
+
+:where(.kit-btn[data-variant=surface]) {
+  --kit-btn-bg: color-mix(in oklab, var(--kit-btn-ink) 8%, transparent);
+  --kit-btn-fg: var(--kit-btn-ink);
+  --kit-btn-border: color-mix(in oklab, var(--kit-btn-ink) 35%, transparent);
+  --kit-btn-active: color-mix(in oklab, var(--kit-btn-ink) 18%, transparent);
+  --kit-btn-active-fg: var(--kit-btn-ink);
+}
+
+:where(.kit-btn[data-variant=text]) {
+  --kit-btn-bg: transparent;
+  --kit-btn-fg: var(--kit-btn-ink);
+  --kit-btn-border: transparent;
+  --kit-btn-active: color-mix(in oklab, var(--kit-btn-ink) 14%, transparent);
+  --kit-btn-active-fg: var(--kit-btn-ink);
+}
+
+:where(.kit-btn[data-variant=plain]) {
+  --kit-btn-bg: transparent;
+  --kit-btn-fg: var(--kit-btn-ink);
+  --kit-btn-border: transparent;
+  --kit-btn-hover: transparent;
+  --kit-btn-pressed: transparent;
+  --kit-btn-hover-fg: color-mix(in oklab, var(--kit-btn-fg) 72%, transparent);
+  --kit-btn-pressed-fg: color-mix(in oklab, var(--kit-btn-fg) 56%, transparent);
+  --kit-btn-active: transparent;
+  --kit-btn-active-fg: var(--kit-btn-color, var(--kit-color-accent));
+}
+
+:where(.kit-btn[data-variant=link]) {
+  --kit-btn-bg: transparent;
+  --kit-btn-fg: var(--kit-btn-ink);
+  --kit-btn-border: transparent;
+  --kit-btn-hover: transparent;
+  --kit-btn-pressed: transparent;
+  --kit-btn-hover-fg: color-mix(in oklab, var(--kit-btn-fg) 72%, transparent);
+  --kit-btn-pressed-fg: color-mix(in oklab, var(--kit-btn-fg) 56%, transparent);
+  --kit-btn-active: transparent;
+  --kit-btn-active-fg: var(--kit-btn-color, var(--kit-color-accent));
+}
+
+.kit-btn[data-variant=link] {
+  height: auto;
+  padding: 0;
+  text-decoration: underline;
+}
+
+:where(.kit-btn .outline) {
+  --outline-color: var(--kit-btn-border);
+}
+
+:where(.kit-btn[data-active=true], .kit-btn:has(> .kit-btn__input:checked)) {
+  --kit-btn-bg: var(--kit-btn-active, var(--kit-color-accent));
+  --kit-btn-fg: var(
+  	--kit-btn-active-fg,
+  	var(--kit-btn-on-color, var(--kit-btn-contrast, var(--kit-color-on-accent)))
+  );
+}
+
+/**
+ * interactive: hover, pressed, focus-visible and disabled
+ */
+.kit-btn[data-interactive=true]:not([data-disabled=true]) {
+  cursor: pointer;
+}
+.kit-btn[data-interactive=true]:not([data-disabled=true]):hover {
+  background-color: var(--kit-btn-hover);
+  color: var(--kit-btn-hover-fg, var(--kit-btn-fg));
+}
+.kit-btn[data-interactive=true]:not([data-disabled=true]):active {
+  background-color: var(--kit-btn-pressed);
+  color: var(--kit-btn-pressed-fg, var(--kit-btn-fg));
+}
+
+.kit-btn:not([data-disabled=true]):focus-visible {
+  outline: 2px solid var(--kit-color-focus);
+  outline-offset: 2px;
+}
+
+.kit-btn[data-disabled=true] {
+  opacity: var(--kit-disabled-opacity, 0.55);
+  pointer-events: none;
+  user-select: none;
+}
+
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-btn[data-rounded="0"]) {
+  --kit-btn-radius: var(--kit-shape-none);
+}
+
+:where(.kit-btn[data-rounded=xs]) {
+  --kit-btn-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-btn[data-rounded=sm]) {
+  --kit-btn-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-btn[data-rounded=md]) {
+  --kit-btn-radius: var(--kit-shape-md);
+}
+
+:where(.kit-btn[data-rounded=lg]) {
+  --kit-btn-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-btn[data-rounded=xl]) {
+  --kit-btn-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-btn[data-rounded=full]) {
+  --kit-btn-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/button#density
+ */
+:where(.kit-btn[data-density=dense]) {
+  --kit-btn-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-btn[data-density=compact]) {
+  --kit-btn-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-btn[data-density=default]) {
+  --kit-btn-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-btn[data-density=comfortable]) {
+  --kit-btn-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-btn[data-density=spacious]) {
+  --kit-btn-density-offset: var(--kit-density-spacious);
+}</style>