lapikit 0.8.2 → 0.8.3

package/dist/@types/props.d.ts

@@ -2,7 +2,7 @@ export type PropValue = string | boolean | number | null | undefined;
 export type SizeType = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type RoundedType = 0 | '0' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type DensityType = 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
-export type ElevationType = '0' | '1' | '2' | '3' | '4' | '5';
+export type ElevationType = '0' | '1' | '2' | '3' | '4' | '5' | 0 | 1 | 2 | 3 | 4 | 5;
 export interface ElevationState {
     base?: ElevationType;
     hover?: ElevationType;

package/dist/components/accordion/accordion.svelte

@@ -141,10 +141,14 @@
  * @link https://lapikit.dev/docs/components/accordion#variants
  */
 :where(.kit-accordion[data-variant=tonal]) :global(.kit-accordion-item) {
-  --kit-accordion-item-bg: color-mix(in oklab, var(--kit-accordion-item-ink) 16%, transparent);
+  --kit-accordion-item-bg: color-mix(in oklab, var(--kit-accordion-item-color, var(--kit-accordion-item-ink)) 16%, transparent);
   --kit-accordion-item-fg: var(--kit-accordion-item-ink);
   --kit-accordion-item-border: transparent;
-  --kit-accordion-item-active: color-mix(in oklab, var(--kit-accordion-item-ink) 28%, transparent);
+  --kit-accordion-item-active: color-mix(
+  	in oklab,
+  	var(--kit-accordion-item-color, var(--kit-accordion-item-ink)) 28%,
+  	transparent
+  );
   --kit-accordion-item-active-fg: var(--kit-accordion-item-ink);
 }
 

package/dist/components/accordion/modules/accordion-item.svelte

@@ -112,13 +112,14 @@
 <style>:where(.kit-accordion-item) {
   --kit-accordion-item-color: initial;
   --kit-accordion-item-on-color: initial;
+  --kit-accordion-item-text-color: initial;
   --kit-accordion-item-active-fg: initial;
   --kit-accordion-item-active-shade: initial;
   --kit-accordion-item-hover-fg: initial;
   --kit-accordion-item-pressed-fg: initial;
   --kit-accordion-item-bg: var(--kit-accordion-item-color, var(--kit-color-surface-1));
   --kit-accordion-item-fg: var(--kit-accordion-item-on-color, var(--kit-accordion-item-contrast, var(--kit-color-text)));
-  --kit-accordion-item-ink: var(--kit-accordion-item-color, var(--kit-color-text));
+  --kit-accordion-item-ink: var(--kit-accordion-item-text-color, var(--kit-accordion-item-color, var(--kit-color-text)));
   --kit-accordion-item-hover: color-mix(in oklab, var(--kit-accordion-item-bg), var(--kit-accordion-item-fg) 8%);
   --kit-accordion-item-pressed: color-mix(in oklab, var(--kit-accordion-item-bg), var(--kit-accordion-item-fg) 14%);
   --kit-accordion-item-soft: color-mix(in oklab, var(--kit-accordion-item-bg) 16%, transparent);

package/dist/components/alert/alert.svelte

@@ -99,13 +99,14 @@
 <style>:where(.kit-alert) {
   --kit-alert-color: initial;
   --kit-alert-on-color: initial;
+  --kit-alert-text-color: initial;
   --kit-alert-active-fg: initial;
   --kit-alert-active-shade: initial;
   --kit-alert-hover-fg: initial;
   --kit-alert-pressed-fg: initial;
   --kit-alert-bg: var(--kit-alert-color, var(--kit-color-surface-2));
   --kit-alert-fg: var(--kit-alert-on-color, var(--kit-alert-contrast, var(--kit-color-text)));
-  --kit-alert-ink: var(--kit-alert-color, var(--kit-color-text));
+  --kit-alert-ink: var(--kit-alert-text-color, var(--kit-alert-color, var(--kit-color-text)));
   --kit-alert-hover: color-mix(in oklab, var(--kit-alert-bg), var(--kit-alert-fg) 8%);
   --kit-alert-pressed: color-mix(in oklab, var(--kit-alert-bg), var(--kit-alert-fg) 14%);
   --kit-alert-soft: color-mix(in oklab, var(--kit-alert-bg) 16%, transparent);
@@ -227,10 +228,14 @@
  * @link https://lapikit.dev/docs/components/alert#variants
  */
 :where(.kit-alert[data-variant=tonal]) {
-  --kit-alert-bg: color-mix(in oklab, var(--kit-alert-ink) 16%, transparent);
+  --kit-alert-bg: color-mix(in oklab, var(--kit-alert-color, var(--kit-alert-ink)) 16%, transparent);
   --kit-alert-fg: var(--kit-alert-ink);
   --kit-alert-border: transparent;
-  --kit-alert-active: color-mix(in oklab, var(--kit-alert-ink) 28%, transparent);
+  --kit-alert-active: color-mix(
+  	in oklab,
+  	var(--kit-alert-color, var(--kit-alert-ink)) 28%,
+  	transparent
+  );
   --kit-alert-active-fg: var(--kit-alert-ink);
 }
 

package/dist/components/app/app.svelte

@@ -69,17 +69,21 @@
   --kit-color-fill-active: hsl(240 4% 88%);
   --kit-color-border: hsl(220 16% 88%);
   --kit-color-shadow: hsl(240 3% 11%);
-  --kit-color-accent: hsl(220 90% 56%);
+  --kit-color-accent: hsl(240 3% 11%);
   --kit-color-on-accent: hsl(0 0% 100%);
-  --kit-color-success: hsl(145 50% 38%);
-  --kit-color-on-success: hsl(0 0% 100%);
-  --kit-color-warning: hsl(35 80% 45%);
-  --kit-color-on-warning: hsl(222 20% 10%);
-  --kit-color-error: hsl(5 65% 48%);
+  --kit-color-success: hsl(135 59% 49%);
+  --kit-color-on-success: hsl(240 3% 11%);
+  --kit-color-success-text: color-mix(in oklab, var(--kit-color-success), black 30%);
+  --kit-color-warning: hsl(35 100% 50%);
+  --kit-color-on-warning: hsl(240 3% 11%);
+  --kit-color-warning-text: color-mix(in oklab, var(--kit-color-warning), black 30%);
+  --kit-color-error: hsl(3 100% 46%);
   --kit-color-on-error: hsl(0 0% 100%);
-  --kit-color-info: hsl(205 60% 42%);
+  --kit-color-error-text: color-mix(in oklab, var(--kit-color-error), black 15%);
+  --kit-color-info: hsl(211 100% 46%);
   --kit-color-on-info: hsl(0 0% 100%);
-  --kit-color-focus: hsl(35 90% 56%);
+  --kit-color-info-text: color-mix(in oklab, var(--kit-color-info), black 10%);
+  --kit-color-focus: hsl(211 100% 50%);
 }
 :global :where([data-kit-theme=dark]) {
   color-scheme: dark;
@@ -96,17 +100,21 @@
   --kit-color-fill-active: hsl(240 2.5% 31%);
   --kit-color-border: hsl(240 2% 26%);
   --kit-color-shadow: hsl(240 3% 11%);
-  --kit-color-accent: hsl(220 85% 65%);
+  --kit-color-accent: hsl(0 0% 100%);
   --kit-color-on-accent: hsl(240 3% 11%);
-  --kit-color-success: hsl(145 50% 50%);
+  --kit-color-success: hsl(135 64% 50%);
   --kit-color-on-success: hsl(240 3% 11%);
-  --kit-color-warning: hsl(35 85% 58%);
+  --kit-color-success-text: var(--kit-color-success);
+  --kit-color-warning: hsl(36 100% 52%);
   --kit-color-on-warning: hsl(240 3% 11%);
-  --kit-color-error: hsl(5 70% 60%);
+  --kit-color-warning-text: var(--kit-color-warning);
+  --kit-color-error: hsl(3 100% 61%);
   --kit-color-on-error: hsl(240 3% 11%);
-  --kit-color-info: hsl(205 65% 58%);
+  --kit-color-error-text: var(--kit-color-error);
+  --kit-color-info: hsl(210 100% 52%);
   --kit-color-on-info: hsl(240 3% 11%);
-  --kit-color-focus: hsl(35 90% 62%);
+  --kit-color-info-text: var(--kit-color-info);
+  --kit-color-focus: hsl(210 100% 52%);
 }
 @media (prefers-color-scheme: light) {
   :global :where([data-kit-theme=system]) {
@@ -124,17 +132,21 @@
     --kit-color-fill-active: hsl(240 4% 88%);
     --kit-color-border: hsl(220 16% 88%);
     --kit-color-shadow: hsl(240 3% 11%);
-    --kit-color-accent: hsl(220 90% 56%);
+    --kit-color-accent: hsl(240 3% 11%);
     --kit-color-on-accent: hsl(0 0% 100%);
-    --kit-color-success: hsl(145 50% 38%);
-    --kit-color-on-success: hsl(0 0% 100%);
-    --kit-color-warning: hsl(35 80% 45%);
-    --kit-color-on-warning: hsl(222 20% 10%);
-    --kit-color-error: hsl(5 65% 48%);
+    --kit-color-success: hsl(135 59% 49%);
+    --kit-color-on-success: hsl(240 3% 11%);
+    --kit-color-success-text: color-mix(in oklab, var(--kit-color-success), black 30%);
+    --kit-color-warning: hsl(35 100% 50%);
+    --kit-color-on-warning: hsl(240 3% 11%);
+    --kit-color-warning-text: color-mix(in oklab, var(--kit-color-warning), black 30%);
+    --kit-color-error: hsl(3 100% 46%);
     --kit-color-on-error: hsl(0 0% 100%);
-    --kit-color-info: hsl(205 60% 42%);
+    --kit-color-error-text: color-mix(in oklab, var(--kit-color-error), black 15%);
+    --kit-color-info: hsl(211 100% 46%);
     --kit-color-on-info: hsl(0 0% 100%);
-    --kit-color-focus: hsl(35 90% 56%);
+    --kit-color-info-text: color-mix(in oklab, var(--kit-color-info), black 10%);
+    --kit-color-focus: hsl(211 100% 50%);
   }
 }
 @media (prefers-color-scheme: dark) {
@@ -153,17 +165,21 @@
     --kit-color-fill-active: hsl(240 2.5% 31%);
     --kit-color-border: hsl(240 2% 26%);
     --kit-color-shadow: hsl(240 3% 11%);
-    --kit-color-accent: hsl(220 85% 65%);
+    --kit-color-accent: hsl(0 0% 100%);
     --kit-color-on-accent: hsl(240 3% 11%);
-    --kit-color-success: hsl(145 50% 50%);
+    --kit-color-success: hsl(135 64% 50%);
     --kit-color-on-success: hsl(240 3% 11%);
-    --kit-color-warning: hsl(35 85% 58%);
+    --kit-color-success-text: var(--kit-color-success);
+    --kit-color-warning: hsl(36 100% 52%);
     --kit-color-on-warning: hsl(240 3% 11%);
-    --kit-color-error: hsl(5 70% 60%);
+    --kit-color-warning-text: var(--kit-color-warning);
+    --kit-color-error: hsl(3 100% 61%);
     --kit-color-on-error: hsl(240 3% 11%);
-    --kit-color-info: hsl(205 65% 58%);
+    --kit-color-error-text: var(--kit-color-error);
+    --kit-color-info: hsl(210 100% 52%);
     --kit-color-on-info: hsl(240 3% 11%);
-    --kit-color-focus: hsl(35 90% 62%);
+    --kit-color-info-text: var(--kit-color-info);
+    --kit-color-focus: hsl(210 100% 52%);
   }
 }
 :global .outline {

package/dist/components/appbar/appbar.svelte

@@ -53,13 +53,14 @@
 <style>:where(.kit-appbar) {
   --kit-appbar-color: initial;
   --kit-appbar-on-color: initial;
+  --kit-appbar-text-color: initial;
   --kit-appbar-active-fg: initial;
   --kit-appbar-active-shade: initial;
   --kit-appbar-hover-fg: initial;
   --kit-appbar-pressed-fg: initial;
   --kit-appbar-bg: var(--kit-appbar-color, var(--kit-color-surface-1));
   --kit-appbar-fg: var(--kit-appbar-on-color, var(--kit-appbar-contrast, var(--kit-color-text)));
-  --kit-appbar-ink: var(--kit-appbar-color, var(--kit-color-text));
+  --kit-appbar-ink: var(--kit-appbar-text-color, var(--kit-appbar-color, var(--kit-color-text)));
   --kit-appbar-hover: color-mix(in oklab, var(--kit-appbar-bg), var(--kit-appbar-fg) 8%);
   --kit-appbar-pressed: color-mix(in oklab, var(--kit-appbar-bg), var(--kit-appbar-fg) 14%);
   --kit-appbar-soft: color-mix(in oklab, var(--kit-appbar-bg) 16%, transparent);
@@ -154,10 +155,14 @@
  * @link https://lapikit.dev/docs/components/appbar#variants
  */
 :where(.kit-appbar[data-variant=tonal]) {
-  --kit-appbar-bg: color-mix(in oklab, var(--kit-appbar-ink) 16%, transparent);
+  --kit-appbar-bg: color-mix(in oklab, var(--kit-appbar-color, var(--kit-appbar-ink)) 16%, transparent);
   --kit-appbar-fg: var(--kit-appbar-ink);
   --kit-appbar-border: transparent;
-  --kit-appbar-active: color-mix(in oklab, var(--kit-appbar-ink) 28%, transparent);
+  --kit-appbar-active: color-mix(
+  	in oklab,
+  	var(--kit-appbar-color, var(--kit-appbar-ink)) 28%,
+  	transparent
+  );
   --kit-appbar-active-fg: var(--kit-appbar-ink);
 }
 

package/dist/components/avatar/avatar.svelte

@@ -48,13 +48,14 @@
 <style>:where(.kit-avatar) {
   --kit-avatar-color: initial;
   --kit-avatar-on-color: initial;
+  --kit-avatar-text-color: initial;
   --kit-avatar-active-fg: initial;
   --kit-avatar-active-shade: initial;
   --kit-avatar-hover-fg: initial;
   --kit-avatar-pressed-fg: initial;
   --kit-avatar-bg: var(--kit-avatar-color, var(--kit-color-surface-3));
   --kit-avatar-fg: var(--kit-avatar-on-color, var(--kit-avatar-contrast, var(--kit-color-text)));
-  --kit-avatar-ink: var(--kit-avatar-color, var(--kit-color-text));
+  --kit-avatar-ink: var(--kit-avatar-text-color, var(--kit-avatar-color, var(--kit-color-text)));
   --kit-avatar-hover: color-mix(in oklab, var(--kit-avatar-bg), var(--kit-avatar-fg) 8%);
   --kit-avatar-pressed: color-mix(in oklab, var(--kit-avatar-bg), var(--kit-avatar-fg) 14%);
   --kit-avatar-soft: color-mix(in oklab, var(--kit-avatar-bg) 16%, transparent);

package/dist/components/btn/btn.svelte

@@ -149,13 +149,14 @@
 <style>:where(.kit-btn) {
   --kit-btn-color: initial;
   --kit-btn-on-color: initial;
+  --kit-btn-text-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-ink: var(--kit-btn-text-color, 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);
@@ -344,10 +345,14 @@ button.kit-btn {
  * @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-bg: color-mix(in oklab, var(--kit-btn-color, 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: color-mix(
+  	in oklab,
+  	var(--kit-btn-color, var(--kit-btn-ink)) 28%,
+  	transparent
+  );
   --kit-btn-active-fg: var(--kit-btn-ink);
 }
 
@@ -384,7 +389,10 @@ button.kit-btn {
   --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-active-fg: var(
+  	--kit-btn-text-color,
+  	var(--kit-btn-color, var(--kit-color-accent-text, var(--kit-color-accent)))
+  );
 }
 
 :where(.kit-btn[data-variant=link]) {
@@ -396,7 +404,10 @@ button.kit-btn {
   --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-active-fg: var(
+  	--kit-btn-text-color,
+  	var(--kit-btn-color, var(--kit-color-accent-text, var(--kit-color-accent)))
+  );
 }
 
 .kit-btn[data-variant=link] {

package/dist/components/card/card.svelte

@@ -75,13 +75,14 @@
 <style>:where(.kit-card) {
   --kit-card-color: initial;
   --kit-card-on-color: initial;
+  --kit-card-text-color: initial;
   --kit-card-active-fg: initial;
   --kit-card-active-shade: initial;
   --kit-card-hover-fg: initial;
   --kit-card-pressed-fg: initial;
   --kit-card-bg: var(--kit-card-color, var(--kit-color-surface-1));
   --kit-card-fg: var(--kit-card-on-color, var(--kit-card-contrast, var(--kit-color-text)));
-  --kit-card-ink: var(--kit-card-color, var(--kit-color-text));
+  --kit-card-ink: var(--kit-card-text-color, var(--kit-card-color, var(--kit-color-text)));
   --kit-card-hover: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 8%);
   --kit-card-pressed: color-mix(in oklab, var(--kit-card-bg), var(--kit-card-fg) 14%);
   --kit-card-soft: color-mix(in oklab, var(--kit-card-bg) 16%, transparent);
@@ -140,10 +141,14 @@ button.kit-card {
  * @link https://lapikit.dev/docs/components/card#variants
  */
 :where(.kit-card[data-variant=tonal]) {
-  --kit-card-bg: color-mix(in oklab, var(--kit-card-ink) 16%, transparent);
+  --kit-card-bg: color-mix(in oklab, var(--kit-card-color, var(--kit-card-ink)) 16%, transparent);
   --kit-card-fg: var(--kit-card-ink);
   --kit-card-border: transparent;
-  --kit-card-active: color-mix(in oklab, var(--kit-card-ink) 28%, transparent);
+  --kit-card-active: color-mix(
+  	in oklab,
+  	var(--kit-card-color, var(--kit-card-ink)) 28%,
+  	transparent
+  );
   --kit-card-active-fg: var(--kit-card-ink);
 }
 
@@ -164,7 +169,10 @@ button.kit-card {
   --kit-card-hover-fg: color-mix(in oklab, var(--kit-card-fg) 72%, transparent);
   --kit-card-pressed-fg: color-mix(in oklab, var(--kit-card-fg) 56%, transparent);
   --kit-card-active: transparent;
-  --kit-card-active-fg: var(--kit-card-color, var(--kit-color-accent));
+  --kit-card-active-fg: var(
+  	--kit-card-text-color,
+  	var(--kit-card-color, var(--kit-color-accent-text, var(--kit-color-accent)))
+  );
 }
 
 :where(.kit-card[data-variant=outline]) {

package/dist/components/chip/chip.svelte

@@ -157,13 +157,14 @@
 <style>:where(.kit-chip) {
   --kit-chip-color: initial;
   --kit-chip-on-color: initial;
+  --kit-chip-text-color: initial;
   --kit-chip-active-fg: initial;
   --kit-chip-active-shade: initial;
   --kit-chip-hover-fg: initial;
   --kit-chip-pressed-fg: initial;
   --kit-chip-bg: var(--kit-chip-color, var(--kit-color-surface-2));
   --kit-chip-fg: var(--kit-chip-on-color, var(--kit-chip-contrast, var(--kit-color-text)));
-  --kit-chip-ink: var(--kit-chip-color, var(--kit-color-text));
+  --kit-chip-ink: var(--kit-chip-text-color, var(--kit-chip-color, var(--kit-color-text)));
   --kit-chip-hover: color-mix(in oklab, var(--kit-chip-bg), var(--kit-chip-fg) 8%);
   --kit-chip-pressed: color-mix(in oklab, var(--kit-chip-bg), var(--kit-chip-fg) 14%);
   --kit-chip-soft: color-mix(in oklab, var(--kit-chip-bg) 16%, transparent);
@@ -347,10 +348,14 @@ button.kit-chip {
  * @link https://lapikit.dev/docs/components/chip#variants
  */
 :where(.kit-chip[data-variant=tonal]) {
-  --kit-chip-bg: color-mix(in oklab, var(--kit-chip-ink) 16%, transparent);
+  --kit-chip-bg: color-mix(in oklab, var(--kit-chip-color, var(--kit-chip-ink)) 16%, transparent);
   --kit-chip-fg: var(--kit-chip-ink);
   --kit-chip-border: transparent;
-  --kit-chip-active: color-mix(in oklab, var(--kit-chip-ink) 28%, transparent);
+  --kit-chip-active: color-mix(
+  	in oklab,
+  	var(--kit-chip-color, var(--kit-chip-ink)) 28%,
+  	transparent
+  );
   --kit-chip-active-fg: var(--kit-chip-ink);
 }
 
@@ -387,7 +392,10 @@ button.kit-chip {
   --kit-chip-hover-fg: color-mix(in oklab, var(--kit-chip-fg) 72%, transparent);
   --kit-chip-pressed-fg: color-mix(in oklab, var(--kit-chip-fg) 56%, transparent);
   --kit-chip-active: transparent;
-  --kit-chip-active-fg: var(--kit-chip-color, var(--kit-color-accent));
+  --kit-chip-active-fg: var(
+  	--kit-chip-text-color,
+  	var(--kit-chip-color, var(--kit-color-accent-text, var(--kit-color-accent)))
+  );
 }
 
 :where(.kit-chip .outline) {

package/dist/components/dialog/dialog.svelte

@@ -117,13 +117,14 @@
 <style>:where(.kit-dialog) {
   --kit-dialog-color: initial;
   --kit-dialog-on-color: initial;
+  --kit-dialog-text-color: initial;
   --kit-dialog-active-fg: initial;
   --kit-dialog-active-shade: initial;
   --kit-dialog-hover-fg: initial;
   --kit-dialog-pressed-fg: initial;
   --kit-dialog-bg: var(--kit-dialog-color, var(--kit-color-surface-1));
   --kit-dialog-fg: var(--kit-dialog-on-color, var(--kit-dialog-contrast, var(--kit-color-text)));
-  --kit-dialog-ink: var(--kit-dialog-color, var(--kit-color-text));
+  --kit-dialog-ink: var(--kit-dialog-text-color, var(--kit-dialog-color, var(--kit-color-text)));
   --kit-dialog-hover: color-mix(in oklab, var(--kit-dialog-bg), var(--kit-dialog-fg) 8%);
   --kit-dialog-pressed: color-mix(in oklab, var(--kit-dialog-bg), var(--kit-dialog-fg) 14%);
   --kit-dialog-soft: color-mix(in oklab, var(--kit-dialog-bg) 16%, transparent);

package/dist/components/dropdown/dropdown.svelte

@@ -217,13 +217,14 @@
 <style>:where(.kit-dropdown-content) {
   --kit-dropdown-content-color: initial;
   --kit-dropdown-content-on-color: initial;
+  --kit-dropdown-content-text-color: initial;
   --kit-dropdown-content-active-fg: initial;
   --kit-dropdown-content-active-shade: initial;
   --kit-dropdown-content-hover-fg: initial;
   --kit-dropdown-content-pressed-fg: initial;
   --kit-dropdown-content-bg: var(--kit-dropdown-content-color, var(--kit-color-surface-3));
   --kit-dropdown-content-fg: var(--kit-dropdown-content-on-color, var(--kit-dropdown-content-contrast, var(--kit-color-text)));
-  --kit-dropdown-content-ink: var(--kit-dropdown-content-color, var(--kit-color-text));
+  --kit-dropdown-content-ink: var(--kit-dropdown-content-text-color, var(--kit-dropdown-content-color, var(--kit-color-text)));
   --kit-dropdown-content-hover: color-mix(in oklab, var(--kit-dropdown-content-bg), var(--kit-dropdown-content-fg) 8%);
   --kit-dropdown-content-pressed: color-mix(in oklab, var(--kit-dropdown-content-bg), var(--kit-dropdown-content-fg) 14%);
   --kit-dropdown-content-soft: color-mix(in oklab, var(--kit-dropdown-content-bg) 16%, transparent);

package/dist/components/field/field.svelte

@@ -163,13 +163,14 @@
 <style>:where(.kit-field) {
   --kit-field-color: initial;
   --kit-field-on-color: initial;
+  --kit-field-text-color: initial;
   --kit-field-active-fg: initial;
   --kit-field-active-shade: initial;
   --kit-field-hover-fg: initial;
   --kit-field-pressed-fg: initial;
   --kit-field-bg: var(--kit-field-color, var(--kit-color-surface-2));
   --kit-field-fg: var(--kit-field-on-color, var(--kit-field-contrast, var(--kit-color-text)));
-  --kit-field-ink: var(--kit-field-color, var(--kit-color-text));
+  --kit-field-ink: var(--kit-field-text-color, var(--kit-field-color, var(--kit-color-text)));
   --kit-field-hover: color-mix(in oklab, var(--kit-field-bg), var(--kit-field-fg) 8%);
   --kit-field-pressed: color-mix(in oklab, var(--kit-field-bg), var(--kit-field-fg) 14%);
   --kit-field-soft: color-mix(in oklab, var(--kit-field-bg) 16%, transparent);
@@ -219,7 +220,7 @@
   line-height: 1.2;
 }
 .kit-field[data-error=true] .kit-field__label {
-  color: var(--kit-color-error);
+  color: var(--kit-color-error-text, var(--kit-color-error));
 }
 .kit-field__prepend, .kit-field__append {
   display: flex;
@@ -329,7 +330,7 @@
   opacity: 1;
 }
 .kit-field[data-error=true] .kit-field__message {
-  color: var(--kit-color-error);
+  color: var(--kit-color-error-text, var(--kit-color-error));
 }
 .kit-field__message-text {
   word-break: break-word;
@@ -406,10 +407,14 @@
  * @link https://lapikit.dev/docs/components/field#variants
  */
 :where(.kit-field[data-variant=tonal]) {
-  --kit-field-bg: color-mix(in oklab, var(--kit-field-ink) 16%, transparent);
+  --kit-field-bg: color-mix(in oklab, var(--kit-field-color, var(--kit-field-ink)) 16%, transparent);
   --kit-field-fg: var(--kit-field-ink);
   --kit-field-border: transparent;
-  --kit-field-active: color-mix(in oklab, var(--kit-field-ink) 28%, transparent);
+  --kit-field-active: color-mix(
+  	in oklab,
+  	var(--kit-field-color, var(--kit-field-ink)) 28%,
+  	transparent
+  );
   --kit-field-active-fg: var(--kit-field-ink);
 }
 

package/dist/components/icon/icon.svelte

@@ -102,7 +102,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--kit-icon-color, currentColor);
+  color: var(--kit-icon-text-color, var(--kit-icon-color, currentColor));
   font-size: var(--kit-icon-current-size, var(--kit-icon-size-md));
   line-height: 1;
   text-indent: 0;
@@ -118,7 +118,7 @@
 }
 .kit-icon .kit-icon__mask {
   display: inline-block;
-  background-color: var(--kit-icon-color, currentColor);
+  background-color: var(--kit-icon-text-color, var(--kit-icon-color, currentColor));
   mask-image: var(--kit-icon-mask-image);
   mask-repeat: no-repeat;
   mask-size: contain;

package/dist/components/list/list.svelte

@@ -141,10 +141,14 @@
  * @link https://lapikit.dev/docs/components/list#variants
  */
 :where(.kit-list[data-variant=tonal]) :global(.kit-list-item) {
-  --kit-list-item-bg: color-mix(in oklab, var(--kit-list-item-ink) 16%, transparent);
+  --kit-list-item-bg: color-mix(in oklab, var(--kit-list-item-color, var(--kit-list-item-ink)) 16%, transparent);
   --kit-list-item-fg: var(--kit-list-item-ink);
   --kit-list-item-border: transparent;
-  --kit-list-item-active: color-mix(in oklab, var(--kit-list-item-ink) 28%, transparent);
+  --kit-list-item-active: color-mix(
+  	in oklab,
+  	var(--kit-list-item-color, var(--kit-list-item-ink)) 28%,
+  	transparent
+  );
   --kit-list-item-active-fg: var(--kit-list-item-ink);
 }
 
@@ -181,7 +185,10 @@
   --kit-list-item-hover-fg: color-mix(in oklab, var(--kit-list-item-fg) 72%, transparent);
   --kit-list-item-pressed-fg: color-mix(in oklab, var(--kit-list-item-fg) 56%, transparent);
   --kit-list-item-active: transparent;
-  --kit-list-item-active-fg: var(--kit-list-item-color, var(--kit-color-accent));
+  --kit-list-item-active-fg: var(
+  	--kit-list-item-text-color,
+  	var(--kit-list-item-color, var(--kit-color-accent-text, var(--kit-color-accent)))
+  );
 }
 
 /**

package/dist/components/list/modules/list-item.svelte

@@ -95,13 +95,14 @@
 <style>:where(.kit-list-item) {
   --kit-list-item-color: initial;
   --kit-list-item-on-color: initial;
+  --kit-list-item-text-color: initial;
   --kit-list-item-active-fg: initial;
   --kit-list-item-active-shade: initial;
   --kit-list-item-hover-fg: initial;
   --kit-list-item-pressed-fg: initial;
   --kit-list-item-bg: var(--kit-list-item-color, var(--kit-color-surface-2));
   --kit-list-item-fg: var(--kit-list-item-on-color, var(--kit-list-item-contrast, var(--kit-color-text)));
-  --kit-list-item-ink: var(--kit-list-item-color, var(--kit-color-text));
+  --kit-list-item-ink: var(--kit-list-item-text-color, var(--kit-list-item-color, var(--kit-color-text)));
   --kit-list-item-hover: color-mix(in oklab, var(--kit-list-item-bg), var(--kit-list-item-fg) 8%);
   --kit-list-item-pressed: color-mix(in oklab, var(--kit-list-item-bg), var(--kit-list-item-fg) 14%);
   --kit-list-item-soft: color-mix(in oklab, var(--kit-list-item-bg) 16%, transparent);

package/dist/components/modal/modal.svelte

@@ -123,13 +123,14 @@
 <style>:where(.kit-modal) {
   --kit-modal-color: initial;
   --kit-modal-on-color: initial;
+  --kit-modal-text-color: initial;
   --kit-modal-active-fg: initial;
   --kit-modal-active-shade: initial;
   --kit-modal-hover-fg: initial;
   --kit-modal-pressed-fg: initial;
   --kit-modal-bg: var(--kit-modal-color, var(--kit-color-surface-1));
   --kit-modal-fg: var(--kit-modal-on-color, var(--kit-modal-contrast, var(--kit-color-text)));
-  --kit-modal-ink: var(--kit-modal-color, var(--kit-color-text));
+  --kit-modal-ink: var(--kit-modal-text-color, var(--kit-modal-color, var(--kit-color-text)));
   --kit-modal-hover: color-mix(in oklab, var(--kit-modal-bg), var(--kit-modal-fg) 8%);
   --kit-modal-pressed: color-mix(in oklab, var(--kit-modal-bg), var(--kit-modal-fg) 14%);
   --kit-modal-soft: color-mix(in oklab, var(--kit-modal-bg) 16%, transparent);

package/dist/components/popover/popover.svelte

@@ -123,13 +123,14 @@
 <style>:where(.kit-popover-content) {
   --kit-popover-content-color: initial;
   --kit-popover-content-on-color: initial;
+  --kit-popover-content-text-color: initial;
   --kit-popover-content-active-fg: initial;
   --kit-popover-content-active-shade: initial;
   --kit-popover-content-hover-fg: initial;
   --kit-popover-content-pressed-fg: initial;
   --kit-popover-content-bg: var(--kit-popover-content-color, var(--kit-color-surface-3));
   --kit-popover-content-fg: var(--kit-popover-content-on-color, var(--kit-popover-content-contrast, var(--kit-color-text)));
-  --kit-popover-content-ink: var(--kit-popover-content-color, var(--kit-color-text));
+  --kit-popover-content-ink: var(--kit-popover-content-text-color, var(--kit-popover-content-color, var(--kit-color-text)));
   --kit-popover-content-hover: color-mix(in oklab, var(--kit-popover-content-bg), var(--kit-popover-content-fg) 8%);
   --kit-popover-content-pressed: color-mix(in oklab, var(--kit-popover-content-bg), var(--kit-popover-content-fg) 14%);
   --kit-popover-content-soft: color-mix(in oklab, var(--kit-popover-content-bg) 16%, transparent);

package/dist/components/toolbar/toolbar.svelte

@@ -57,13 +57,14 @@
 <style>:where(.kit-toolbar) {
   --kit-toolbar-color: initial;
   --kit-toolbar-on-color: initial;
+  --kit-toolbar-text-color: initial;
   --kit-toolbar-active-fg: initial;
   --kit-toolbar-active-shade: initial;
   --kit-toolbar-hover-fg: initial;
   --kit-toolbar-pressed-fg: initial;
   --kit-toolbar-bg: var(--kit-toolbar-color, var(--kit-color-surface-1));
   --kit-toolbar-fg: var(--kit-toolbar-on-color, var(--kit-toolbar-contrast, var(--kit-color-text)));
-  --kit-toolbar-ink: var(--kit-toolbar-color, var(--kit-color-text));
+  --kit-toolbar-ink: var(--kit-toolbar-text-color, var(--kit-toolbar-color, var(--kit-color-text)));
   --kit-toolbar-hover: color-mix(in oklab, var(--kit-toolbar-bg), var(--kit-toolbar-fg) 8%);
   --kit-toolbar-pressed: color-mix(in oklab, var(--kit-toolbar-bg), var(--kit-toolbar-fg) 14%);
   --kit-toolbar-soft: color-mix(in oklab, var(--kit-toolbar-bg) 16%, transparent);
@@ -168,10 +169,14 @@
  * @link https://lapikit.dev/docs/components/toolbar#variants
  */
 :where(.kit-toolbar[data-variant=tonal]) {
-  --kit-toolbar-bg: color-mix(in oklab, var(--kit-toolbar-ink) 16%, transparent);
+  --kit-toolbar-bg: color-mix(in oklab, var(--kit-toolbar-color, var(--kit-toolbar-ink)) 16%, transparent);
   --kit-toolbar-fg: var(--kit-toolbar-ink);
   --kit-toolbar-border: transparent;
-  --kit-toolbar-active: color-mix(in oklab, var(--kit-toolbar-ink) 28%, transparent);
+  --kit-toolbar-active: color-mix(
+  	in oklab,
+  	var(--kit-toolbar-color, var(--kit-toolbar-ink)) 28%,
+  	transparent
+  );
   --kit-toolbar-active-fg: var(--kit-toolbar-ink);
 }
 

package/dist/components/tooltip/tooltip.svelte

@@ -163,13 +163,14 @@
 <style>:where(.kit-tooltip) {
   --kit-tooltip-color: initial;
   --kit-tooltip-on-color: initial;
+  --kit-tooltip-text-color: initial;
   --kit-tooltip-active-fg: initial;
   --kit-tooltip-active-shade: initial;
   --kit-tooltip-hover-fg: initial;
   --kit-tooltip-pressed-fg: initial;
   --kit-tooltip-bg: var(--kit-tooltip-color, var(--kit-color-surface-2));
   --kit-tooltip-fg: var(--kit-tooltip-on-color, var(--kit-tooltip-contrast, var(--kit-color-text)));
-  --kit-tooltip-ink: var(--kit-tooltip-color, var(--kit-color-text));
+  --kit-tooltip-ink: var(--kit-tooltip-text-color, var(--kit-tooltip-color, var(--kit-color-text)));
   --kit-tooltip-hover: color-mix(in oklab, var(--kit-tooltip-bg), var(--kit-tooltip-fg) 8%);
   --kit-tooltip-pressed: color-mix(in oklab, var(--kit-tooltip-bg), var(--kit-tooltip-fg) 14%);
   --kit-tooltip-soft: color-mix(in oklab, var(--kit-tooltip-bg) 16%, transparent);

package/dist/hooks/themes.svelte.js

@@ -24,6 +24,19 @@ function writeStorage(key, name) {
         // ignored: see readStorage
     }
 }
+const animationVariable = '--kit-animation-component';
+function switchWithoutTransitions(target, apply) {
+    const previous = target.style.getPropertyValue(animationVariable);
+    target.style.setProperty(animationVariable, '0s');
+    apply();
+    void getComputedStyle(target).getPropertyValue(animationVariable);
+    requestAnimationFrame(() => {
+        if (previous)
+            target.style.setProperty(animationVariable, previous);
+        else
+            target.style.removeProperty(animationVariable);
+    });
+}
 function generateGlobalTheme() {
     let active = $state(default_theme);
     let key = default_storage_key;
@@ -31,7 +44,8 @@ function generateGlobalTheme() {
     function applyToHtml(name) {
         if (!isBrowser)
             return;
-        document.documentElement.setAttribute('data-kit-theme', name);
+        const root = document.documentElement;
+        switchWithoutTransitions(root, () => root.setAttribute('data-kit-theme', name));
         active = name;
     }
     function set(name) {
@@ -73,7 +87,7 @@ export function createTheme() {
         const target = node;
         if (!target)
             return;
-        target.setAttribute('data-kit-theme', name);
+        switchWithoutTransitions(target, () => target.setAttribute('data-kit-theme', name));
         active = name;
     }
     function set(name) {

package/dist/labs/sheet/sheet.svelte

@@ -75,13 +75,14 @@
 <style>:where(.kit-sheet) {
   --kit-sheet-color: initial;
   --kit-sheet-on-color: initial;
+  --kit-sheet-text-color: initial;
   --kit-sheet-active-fg: initial;
   --kit-sheet-active-shade: initial;
   --kit-sheet-hover-fg: initial;
   --kit-sheet-pressed-fg: initial;
   --kit-sheet-bg: var(--kit-sheet-color, var(--kit-color-surface-1));
   --kit-sheet-fg: var(--kit-sheet-on-color, var(--kit-sheet-contrast, var(--kit-color-text)));
-  --kit-sheet-ink: var(--kit-sheet-color, var(--kit-color-text));
+  --kit-sheet-ink: var(--kit-sheet-text-color, var(--kit-sheet-color, var(--kit-color-text)));
   --kit-sheet-hover: color-mix(in oklab, var(--kit-sheet-bg), var(--kit-sheet-fg) 8%);
   --kit-sheet-pressed: color-mix(in oklab, var(--kit-sheet-bg), var(--kit-sheet-fg) 14%);
   --kit-sheet-soft: color-mix(in oklab, var(--kit-sheet-bg) 16%, transparent);
@@ -133,10 +134,14 @@ button.kit-sheet {
 }
 
 :where(.kit-sheet[data-variant=tonal]) {
-  --kit-sheet-bg: color-mix(in oklab, var(--kit-sheet-ink) 16%, transparent);
+  --kit-sheet-bg: color-mix(in oklab, var(--kit-sheet-color, var(--kit-sheet-ink)) 16%, transparent);
   --kit-sheet-fg: var(--kit-sheet-ink);
   --kit-sheet-border: transparent;
-  --kit-sheet-active: color-mix(in oklab, var(--kit-sheet-ink) 28%, transparent);
+  --kit-sheet-active: color-mix(
+  	in oklab,
+  	var(--kit-sheet-color, var(--kit-sheet-ink)) 28%,
+  	transparent
+  );
   --kit-sheet-active-fg: var(--kit-sheet-ink);
 }
 
@@ -157,7 +162,10 @@ button.kit-sheet {
   --kit-sheet-hover-fg: color-mix(in oklab, var(--kit-sheet-fg) 72%, transparent);
   --kit-sheet-pressed-fg: color-mix(in oklab, var(--kit-sheet-fg) 56%, transparent);
   --kit-sheet-active: transparent;
-  --kit-sheet-active-fg: var(--kit-sheet-color, var(--kit-color-accent));
+  --kit-sheet-active-fg: var(
+  	--kit-sheet-text-color,
+  	var(--kit-sheet-color, var(--kit-color-accent-text, var(--kit-color-accent)))
+  );
 }
 
 :where(.kit-sheet[data-variant=outline]) {

package/dist/utils/color.d.ts

@@ -1,4 +1,5 @@
 import type { ColorProps } from '../@types';
 export declare function resolveColor(color: string | false | null | undefined): string | undefined;
 export declare function resolveOnColor(color: string | false | null | undefined): string | undefined;
+export declare function resolveTextColor(color: string | false | null | undefined): string | undefined;
 export declare function colorStyle(name: string, color: ColorProps | null | undefined, active?: boolean): string;

package/dist/utils/color.js

@@ -25,6 +25,12 @@ export function resolveOnColor(color) {
         return undefined;
     return `var(--kit-color-on-${value})`;
 }
+export function resolveTextColor(color) {
+    const value = clean(color);
+    if (!value || !paletteName.test(value))
+        return undefined;
+    return `var(--kit-color-${value}-text, var(--kit-color-${value}, ${value}))`;
+}
 export function colorStyle(name, color, active = false) {
     const exact = active && typeof color === 'object' && !!clean(color?.active);
     const current = typeof color === 'object' ? (exact ? color?.active : color?.base) : color;
@@ -35,6 +41,9 @@ export function colorStyle(name, color, active = false) {
     const onColor = resolveOnColor(current);
     if (onColor)
         styles.push(`--${name}-on-color: ${onColor}`);
+    const textColor = resolveTextColor(current);
+    if (textColor)
+        styles.push(`--${name}-text-color: ${textColor}`);
     if (exact)
         styles.push(`--${name}-active-shade: 0%`);
     return styles.join('; ');

package/dist/utils/components.d.ts

@@ -20,7 +20,7 @@ export declare function useIsInteractive(props: Record<string, unknown>, tag: st
 export declare function useStyles({ styleAttr, sStyle, styleProps }?: useStylesProps): string;
 /**
  * useElevation - Utility to resolve the `elevation` prop into its base/hover/active states.
- * @param elevation - Either a single elevation value applied as `base`, or an object with
+ * @param elevation - Either a single elevation value (string or number) applied as `base`, or an object with
  * independent `base`, `hover` and `active` values (each key is optional).
  * @returns An object with `base`, `hover` and `active` keys, `undefined` when not provided.
  */

package/dist/utils/components.js

@@ -125,7 +125,7 @@ export function useStyles({ styleAttr, sStyle, styleProps } = {}) {
 }
 /**
  * useElevation - Utility to resolve the `elevation` prop into its base/hover/active states.
- * @param elevation - Either a single elevation value applied as `base`, or an object with
+ * @param elevation - Either a single elevation value (string or number) applied as `base`, or an object with
  * independent `base`, `hover` and `active` values (each key is optional).
  * @returns An object with `base`, `hover` and `active` keys, `undefined` when not provided.
  */
@@ -133,7 +133,7 @@ export function useElevation(elevation) {
     if (elevation === undefined || elevation === null) {
         return { base: undefined, hover: undefined, active: undefined };
     }
-    if (typeof elevation === 'string') {
+    if (typeof elevation !== 'object') {
         return { base: elevation, hover: undefined, active: undefined };
     }
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.8.2",
+	"version": "0.8.3",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"