lapikit 0.0.0-insiders.e94247e → 0.0.0-insiders.eb9b51b

package/dist/components/button/button.css

@@ -1,10 +1,3 @@
-/* root */
-.kit-button {
-	--button-color: var(--on, var(--kit-on-container));
-	--button-background: var(--base, var(--kit-container));
-	--button-radius: var(--shape, var(--kit-radius-md));
-}
-
 .kit-button {
 	position: relative;
 	cursor: pointer;
@@ -14,8 +7,8 @@
 	padding-bottom: var(--button-spacing-x);
 	padding-right: var(--button-spacing-y);
 	padding-left: var(--button-spacing-y);
-	border-radius: var(--button-radius);
-	color: var(--button-color);
+	border-radius: var(--button-shape, var(--system-shape-md));
+	color: var(--button-color, var(--kit-label-primary));
 	font-weight: 500;
 	text-decoration: none;
 }
@@ -29,8 +22,8 @@
 	align-items: center;
 	justify-content: center;
 	white-space: nowrap;
-	gap: calc(var(--prism-spacing) * var(--button-multiplier-gap));
-	font-size: calc(var(--prism-spacing) * var(--button-multiplier-font-size));
+	gap: calc(var(--system-spacing) * var(--button-multiplier-gap));
+	font-size: calc(var(--system-spacing) * var(--button-multiplier-font-size));
 }
 
 .kit-button::after {
@@ -106,49 +99,49 @@
 
 /* density */
 .kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-default {
-	height: calc(var(--prism-spacing) * var(--button-multiplier-x));
+	height: calc(var(--system-spacing) * var(--button-multiplier-x));
 	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y));
+	--button-spacing-y: calc(var(--system-spacing) * var(--button-multiplier-y));
 }
 .kit-button.kit-button--icon[breakpoint]kit-button--density-default {
-	height: calc(var(--prism-spacing) * var(--button-multiplier-x));
-	width: calc(var(--prism-spacing) * var(--button-multiplier-x));
+	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(--prism-spacing) * var(--button-multiplier-x) - 0.25rem);
+	height: calc(var(--system-spacing) * var(--button-multiplier-x) - 0.25rem);
 	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y) - 0.25rem);
+	--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(--prism-spacing) * var(--button-multiplier-x) - 0.25rem);
-	width: calc(var(--prism-spacing) * var(--button-multiplier-x) - 0.25rem);
+	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(--prism-spacing) * var(--button-multiplier-x) + 0.25rem);
+	height: calc(var(--system-spacing) * var(--button-multiplier-x) + 0.25rem);
 	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y) + 0.25rem);
+	--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(--prism-spacing) * var(--button-multiplier-x) + 0.25rem);
-	width: calc(var(--prism-spacing) * var(--button-multiplier-x) + 0.25rem);
+	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);
+	background-color: var(--button-background, var(--kit-background-grouped-primary));
 }
 
 .kit-button[breakpoint]kit-button--variant-outline {
-	--button-color: var(--on, var(--kit-on-container));
-	background-color: var(--button-background);
+	--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: '';
@@ -160,7 +153,7 @@
 }
 
 .kit-button[breakpoint]kit-button--variant-text {
-	--button-color: var(--base, var(--kit-on-container));
+	--button-color: var(--base, var(--kit-label-primary));
 	background-color: transparent;
 	border: none;
 }
@@ -168,37 +161,37 @@
 /* state */
 .kit-button.kit-button--info[class*='button--variant-filled'] {
 	--on: var(--kit-on-info);
-	--base: var(--kit-info);
+	--base: var(--kit-accent-info);
 }
 .kit-button.kit-button--info[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-info);
+	--base: var(--kit-accent-info);
 }
 .kit-button.kit-button--success[class*='button--variant-filled'] {
 	--on: var(--kit-on-success);
-	--base: var(--kit-success);
+	--base: var(--kit-accent-successs);
 }
 .kit-button.kit-button--success[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-success);
+	--base: var(--kit-accent-successs);
 }
 .kit-button.kit-button--warning[class*='button--variant-filled'] {
 	--on: var(--kit-on-warning);
-	--base: var(--kit-warning);
+	--base: var(--kit-accent-warning);
 }
 .kit-button.kit-button--warning[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-warning);
+	--base: var(--kit-accent-warning);
 }
 .kit-button.kit-button--error[class*='button--variant-filled'] {
 	--on: var(--kit-on-error);
-	--base: var(--kit-error);
+	--base: var(--kit-accent-destructive);
 }
 .kit-button.kit-button--error[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-error);
+	--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-scrim));
+	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']) {

package/dist/components/button/button.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/index.js';
+	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/ripple.js';
+	import { ripple } from '../../internal/core/animations/ripple.js';
 
 	let {
 		children,
@@ -68,9 +68,9 @@
 		component: 'button',
 		disabled: noRipple || disabled
 	}}
-	style:--base={assets.color(background)}
-	style:--on={assets.color(color)}
-	style:--shape={assets.shape(rounded)}
+	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">
@@ -100,233 +100,3 @@
 		</div>
 	{/if}
 </svelte:element>
-
-<style>/* root */
-.kit-button {
-	--button-color: var(--on, var(--kit-on-container));
-	--button-background: var(--base, var(--kit-container));
-	--button-radius: var(--shape, var(--kit-radius-md));
-}
-.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-radius);
-	color: var(--button-color);
-	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(--prism-spacing) * var(--button-multiplier-gap));
-	font-size: calc(var(--prism-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(--prism-spacing) * var(--button-multiplier-x));
-	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y));
-}
-.kit-button.kit-button--icon[breakpoint]kit-button--density-default {
-	height: calc(var(--prism-spacing) * var(--button-multiplier-x));
-	width: calc(var(--prism-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(--prism-spacing) * var(--button-multiplier-x) - 0.25rem);
-	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y) - 0.25rem);
-}
-.kit-button.kit-button--icon[breakpoint]kit-button--density-compact {
-	height: calc(var(--prism-spacing) * var(--button-multiplier-x) - 0.25rem);
-	width: calc(var(--prism-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(--prism-spacing) * var(--button-multiplier-x) + 0.25rem);
-	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y) + 0.25rem);
-}
-.kit-button.kit-button--icon[breakpoint]kit-button--density-comfortable {
-	height: calc(var(--prism-spacing) * var(--button-multiplier-x) + 0.25rem);
-	width: calc(var(--prism-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);
-}
-.kit-button[breakpoint]kit-button--variant-outline {
-	--button-color: var(--on, var(--kit-on-container));
-	background-color: var(--button-background);
-}
-.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-on-container));
-	background-color: transparent;
-	border: none;
-}
-/* state */
-.kit-button.kit-button--info[class*='button--variant-filled'] {
-	--on: var(--kit-on-info);
-	--base: var(--kit-info);
-}
-.kit-button.kit-button--info[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-info);
-}
-.kit-button.kit-button--success[class*='button--variant-filled'] {
-	--on: var(--kit-on-success);
-	--base: var(--kit-success);
-}
-.kit-button.kit-button--success[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-success);
-}
-.kit-button.kit-button--warning[class*='button--variant-filled'] {
-	--on: var(--kit-on-warning);
-	--base: var(--kit-warning);
-}
-.kit-button.kit-button--warning[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-warning);
-}
-.kit-button.kit-button--error[class*='button--variant-filled'] {
-	--on: var(--kit-on-error);
-	--base: var(--kit-error);
-}
-.kit-button.kit-button--error[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-error);
-}
-/* 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-scrim));
-}
-.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;
-}
-</style>

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

@@ -1,4 +1,4 @@
-import type { Component } from '../../internal/types.js';
+import type { Component } from '../../internal/types/index.js';
 import type { Snippet } from 'svelte';
 export interface ButtonProps extends Component {
     ref?: HTMLElement | null;

package/dist/components/card/card.css

@@ -1,26 +1,16 @@
-/* root */
-.kit-card {
-	--card-color: var(--on, var(--kit-on-surface));
-	--card-background: var(--base, var(--kit-surface));
-	--card-radius: var(--shape, var(--kit-radius-md));
-}
-
 .kit-card {
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	text-align: start;
 	overflow: hidden;
-	/* transition:
-		color 0.5s,
-		background-color 0.5s; */
 	padding-top: var(--card-spacing-x);
 	padding-bottom: var(--card-spacing-x);
 	padding-right: var(--card-spacing-y);
 	padding-left: var(--card-spacing-y);
-	border-radius: var(--card-radius);
+	border-radius: var(--card-shape, var(--system-shape-md));
 	font-weight: 500;
-	color: var(--card-color);
+	color: var(--card-color, var(--kit-label-primary));
 	text-decoration: none;
 }
 
@@ -50,25 +40,25 @@
 
 /* density */
 .kit-card[breakpoint]kit-card--density-default {
-	--card-spacing-x: calc(var(--prism-spacing) * 2);
-	--card-spacing-y: calc(var(--prism-spacing) * 2);
+	--card-spacing-x: calc(var(--system-spacing) * 2);
+	--card-spacing-y: calc(var(--system-spacing) * 2);
 }
 .kit-card[breakpoint]kit-card--density-compact {
 	--card-spacing-x: 0;
 	--card-spacing-y: 0;
 }
 .kit-card[breakpoint]kit-card--density-comfortable {
-	--card-spacing-x: calc(var(--prism-spacing) * 4);
-	--card-spacing-y: calc(var(--prism-spacing) * 4);
+	--card-spacing-x: calc(var(--system-spacing) * 4);
+	--card-spacing-y: calc(var(--system-spacing) * 4);
 }
 
 /* variant */
 .kit-card[breakpoint]kit-card--variant-filled {
-	background-color: var(--card-background);
+	background-color: var(--card-background, var(--kit-background-grouped-secondary));
 }
 
 .kit-card[breakpoint]kit-card--variant-outline {
-	--card-color: var(--base, var(--kit-on-surface));
+	--card-color: var(--base, var(--kit-label-primary));
 	background-color: transparent;
 }
 .kit-card[breakpoint]kit-card--variant-outline::before {
@@ -81,7 +71,7 @@
 }
 
 .kit-card[breakpoint]kit-card--variant-text {
-	--card-color: var(--base, var(--kit-on-surface));
+	--card-color: var(--base, var(--kit-label-primary));
 	background-color: transparent;
 	border: none;
 }
@@ -89,7 +79,7 @@
 /* events */
 .kit-card[class*='card--variant-filled'].kit-card--clickable:active,
 .kit-card.kit-card--active[class*='card--variant-filled'].kit-card--clickable {
-	background-color: color-mix(in oklab, var(--card-background) 90%, var(--kit-scrim));
+	background-color: color-mix(in oklab, var(--card-background) 90%, var(--kit-state-shadow));
 }
 .kit-card.kit-card--active[class*='card--variant-']:not(
 		[class*='variant-filled']

package/dist/components/card/card.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/index.js';
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
 	import type { CardProps } from './types.js';
 
 	// external
-	import { ripple } from '../../internal/ripple.js';
+	import { ripple } from '../../internal/core/animations/ripple.js';
 
 	let {
 		children,
@@ -55,117 +55,9 @@
 		component: 'card',
 		disabled: noRipple || disabled || !isClickable
 	}}
-	style:--base={assets.color(background)}
-	style:--on={assets.color(color)}
-	style:--shape={assets.shape(rounded)}
+	style:--card-background={assets.color(background)}
+	style:--card-color={assets.color(color)}
+	style:--card-shape={assets.shape(rounded)}
 >
 	{@render children?.()}
 </svelte:element>
-
-<style>/* root */
-.kit-card {
-	--card-color: var(--on, var(--kit-on-surface));
-	--card-background: var(--base, var(--kit-surface));
-	--card-radius: var(--shape, var(--kit-radius-md));
-}
-.kit-card {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	text-align: start;
-	overflow: hidden;
-	/* transition:
-		color 0.5s,
-		background-color 0.5s; */
-	padding-top: var(--card-spacing-x);
-	padding-bottom: var(--card-spacing-x);
-	padding-right: var(--card-spacing-y);
-	padding-left: var(--card-spacing-y);
-	border-radius: var(--card-radius);
-	font-weight: 500;
-	color: var(--card-color);
-	text-decoration: none;
-}
-.kit-card.kit-card--clickable {
-	cursor: pointer;
-}
-.kit-card.kit-card--clickable::after {
-	content: '';
-	position: absolute;
-	inset: 0;
-	background-color: currentColor;
-	opacity: 0;
-	transition: opacity 150ms ease;
-	pointer-events: none;
-	border-radius: inherit;
-}
-.kit-card.kit-card--clickable:hover::after {
-	opacity: 0.08;
-}
-.kit-card.kit-card--clickable:active::after {
-	opacity: 0.12;
-}
-.kit-card.kit-card--clickable:focus-visible::after {
-	opacity: 0.12;
-}
-/* density */
-.kit-card[breakpoint]kit-card--density-default {
-	--card-spacing-x: calc(var(--prism-spacing) * 2);
-	--card-spacing-y: calc(var(--prism-spacing) * 2);
-}
-.kit-card[breakpoint]kit-card--density-compact {
-	--card-spacing-x: 0;
-	--card-spacing-y: 0;
-}
-.kit-card[breakpoint]kit-card--density-comfortable {
-	--card-spacing-x: calc(var(--prism-spacing) * 4);
-	--card-spacing-y: calc(var(--prism-spacing) * 4);
-}
-/* variant */
-.kit-card[breakpoint]kit-card--variant-filled {
-	background-color: var(--card-background);
-}
-.kit-card[breakpoint]kit-card--variant-outline {
-	--card-color: var(--base, var(--kit-on-surface));
-	background-color: transparent;
-}
-.kit-card[breakpoint]kit-card--variant-outline::before {
-	content: '';
-	position: absolute;
-	inset: 0;
-	border: 1px solid currentColor;
-	pointer-events: none;
-	border-radius: inherit;
-}
-.kit-card[breakpoint]kit-card--variant-text {
-	--card-color: var(--base, var(--kit-on-surface));
-	background-color: transparent;
-	border: none;
-}
-/* events */
-.kit-card[class*='card--variant-filled'].kit-card--clickable:active,
-.kit-card.kit-card--active[class*='card--variant-filled'].kit-card--clickable {
-	background-color: color-mix(in oklab, var(--card-background) 90%, var(--kit-scrim));
-}
-.kit-card.kit-card--active[class*='card--variant-']:not(
-		[class*='variant-filled']
-	).kit-card--clickable:active,
-.kit-card.kit-card--active[class*='card--variant-']:not(
-		[class*='variant-filled']
-	).kit-card--clickable {
-	background-color: color-mix(in oklab, currentColor 15%, transparent);
-}
-/* disabled */
-.kit-card.kit-card--disabled,
-.kit-card[disabled],
-.kit-card:disabled {
-	pointer-events: none;
-	user-select: none;
-	opacity: 0.6;
-}
-.kit-card.kit-card--disabled > *,
-.kit-card[disabled] > *,
-.kit-card:disabled > * {
-	opacity: 0.6;
-}
-</style>

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

@@ -1,4 +1,4 @@
-import type { Component } from '../../internal/types.js';
+import type { Component } from '../../internal/types/index.js';
 type Density = 'compact' | 'comfortable' | 'default';
 export interface CardProps extends Component {
     is?: 'a' | 'button' | 'div';