lapikit 0.0.0-insiders.f0512a6 → 0.0.0-insiders.f325e60

package/dist/components/button/button.svelte

@@ -100,3 +100,233 @@
 		</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/card/card.css

@@ -50,16 +50,16 @@
 
 /* density */
 .kit-card[breakpoint]kit-card--density-default {
-	--card-spacing-x: calc(var(--kit-spacing) * 2);
-	--card-spacing-y: calc(var(--kit-spacing) * 2);
+	--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(--kit-spacing) * 4);
-	--card-spacing-y: calc(var(--kit-spacing) * 4);
+	--card-spacing-x: calc(var(--prism-spacing) * 4);
+	--card-spacing-y: calc(var(--prism-spacing) * 4);
 }
 
 /* variant */

package/dist/components/card/card.svelte

@@ -61,3 +61,111 @@
 >
 	{@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/chip/chip.css

@@ -6,7 +6,7 @@
 }
 
 .kit-chip {
-	min-width: calc(var(--kit-spacing) * var(--chip-multiplier-x));
+	min-width: calc(var(--prism-spacing) * var(--chip-multiplier-x));
 	position: relative;
 	border: none;
 	outline: none;
@@ -34,8 +34,8 @@
 	align-items: center;
 	justify-content: center;
 	white-space: nowrap;
-	gap: calc(var(--kit-spacing) * var(--chip-multiplier-gap));
-	font-size: calc(var(--kit-spacing) * var(--chip-multiplier-font-size));
+	gap: calc(var(--prism-spacing) * var(--chip-multiplier-gap));
+	font-size: calc(var(--prism-spacing) * var(--chip-multiplier-font-size));
 	line-height: 0;
 }
 
@@ -130,21 +130,21 @@
 
 /* density */
 .kit-chip[breakpoint]kit-chip--density-default {
-	height: calc(var(--kit-spacing) * var(--chip-multiplier-x));
+	height: calc(var(--prism-spacing) * var(--chip-multiplier-x));
 	--chip-spacing-x: 0;
-	--chip-spacing-y: calc(var(--kit-spacing) * var(--chip-multiplier-y));
+	--chip-spacing-y: calc(var(--prism-spacing) * var(--chip-multiplier-y));
 }
 
 .kit-chip[breakpoint]kit-chip--density-compact {
-	height: calc(var(--kit-spacing) * var(--chip-multiplier-x) - 0.25rem);
+	height: calc(var(--prism-spacing) * var(--chip-multiplier-x) - 0.25rem);
 	--chip-spacing-x: 0;
-	--chip-spacing-y: calc(var(--kit-spacing) * var(--chip-multiplier-y) - 0.25rem);
+	--chip-spacing-y: calc(var(--prism-spacing) * var(--chip-multiplier-y) - 0.25rem);
 }
 
 .kit-chip[breakpoint]kit-chip--density-comfortable {
-	height: calc(var(--kit-spacing) * var(--chip-multiplier-x) + 0.25rem);
+	height: calc(var(--prism-spacing) * var(--chip-multiplier-x) + 0.25rem);
 	--chip-spacing-x: 0;
-	--chip-spacing-y: calc(var(--kit-spacing) * var(--chip-multiplier-y) + 0.25rem);
+	--chip-spacing-y: calc(var(--prism-spacing) * var(--chip-multiplier-y) + 0.25rem);
 }
 
 /* state */

package/dist/components/chip/chip.svelte

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