@placeholderco/placeholder-ui 2.6.6 → 2.7.0

package/dist/ui/Button.svelte

@@ -145,12 +145,14 @@
 	}
 
 	.white {
-		--button-text-color: var(--ui-primary);
+		--button-text-color: var(--ui-primary-text-color);
 		--button-bg-color: white;
 		--button-border: 0;
-		--button-hover-bg-color: var(--ui-tertiary);
-		--button-active-bg-color: var(--ui-tertiary-light);
-		--button-outline-color: var(--ui-tertiary);
+		--button-hover-bg-color: var(--ui-accent-hover-color);
+		--button-hover-text-color: var(--ui-accent-contrast-color);
+		--button-active-bg-color: var(--ui-tertiary-pressed-color);
+		--button-active-text-color: var(--ui-tertiary-contrast-color);
+		--button-outline-color: var(--ui-focus-color);
 	}
 
 	.secondary {
@@ -180,13 +182,13 @@
 	}
 
 	.auto-subtle {
-		--button-text-color: var(--ui-primary);
+		--button-text-color: var(--ui-primary-text-color);
 		--button-bg-color: initial;
 		--button-hover-bg-color: var(--ui-accent);
-		--button-hover-text-color: var(--ui-primary);
+		--button-hover-text-color: var(--ui-accent-contrast-color);
 		--button-active-bg-color: var(--ui-primary);
-		--button-active-text-color: var(--ui-accent);
-		--button-outline-color: var(--ui-tertiary);
+		--button-active-text-color: var(--ui-primary-contrast-color);
+		--button-outline-color: var(--ui-focus-color);
 	}
 
 	.danger {
@@ -197,7 +199,7 @@
 
 		--button-active-bg-color: #b02a37;
 
-		--button-outline-color: var(--ui-tertiary);
+		--button-outline-color: var(--ui-focus-color);
 
 		:global(.loader) {
 			color: white;
@@ -218,82 +220,97 @@
 	}
 
 	.accent {
-		--button-text-color: var(--ui-primary);
+		--button-text-color: var(--ui-accent-contrast-color);
 		--button-bg-color: var(--ui-accent);
-		--button-hover-bg-color: var(--ui-tertiary);
-		--button-active-bg-color: var(--ui-tertiary-light);
-		--button-outline-color: var(--ui-tertiary);
+		--button-hover-bg-color: var(--ui-accent-hover-color);
+		--button-active-bg-color: var(--ui-accent-pressed-color);
+		--button-outline-color: var(--ui-focus-color);
 	}
 
 	.accent-outline {
-		--button-text-color: var(--ui-accent);
+		--button-text-color: var(--ui-accent-text-color);
 		--button-bg-color: initial;
-		--button-border: 1px solid var(--ui-accent);
-		--button-hover-text-color: var(--ui-tertiary);
-		--button-hover-border: 1px solid var(--ui-tertiary);
-		--button-active-text-color: var(--ui-tertiary-light);
-		--button-active-border: 1px solid var(--ui-tertiary-light);
-		--button-outline-color: var(--ui-tertiary);
+		--button-border: 1px solid var(--ui-accent-text-color);
+		--button-hover-text-color: var(--ui-accent-hover-color);
+		--button-hover-border: 1px solid var(--ui-accent-hover-color);
+		--button-active-text-color: var(--ui-accent-pressed-color);
+		--button-active-border: 1px solid var(--ui-accent-pressed-color);
+		--button-outline-color: var(--ui-focus-color);
 	}
 
 	.accent-subtle {
-		--button-text-color: var(--ui-accent);
+		--button-text-color: var(--ui-accent-text-color);
 		--button-bg-color: initial;
-		--button-hover-text-color: var(--ui-primary);
-		--button-hover-bg-color: var(--ui-accent);
-		--button-active-text-color: white;
-		--button-active-bg-color: var(--ui-accent-dark);
-		--button-outline-color: var(--ui-tertiary);
+		--button-hover-text-color: var(--ui-accent-contrast-color);
+		--button-hover-bg-color: var(--ui-accent-hover-color);
+		--button-active-text-color: var(--ui-accent-contrast-color);
+		--button-active-bg-color: var(--ui-accent-pressed-color);
+		--button-outline-color: var(--ui-focus-color);
 	}
 
 	.primary {
 		--button-bg-color: var(--ui-primary);
-		--button-text-color: white;
-		--button-hover-bg-color: var(--ui-accent-dark);
-		--button-active-bg-color: var(--ui-primary-dark);
+		--button-text-color: var(--ui-primary-contrast-color);
+		--button-hover-bg-color: var(--ui-primary-hover-color);
+		--button-active-bg-color: var(--ui-primary-pressed-color);
 	}
 
 	.primary-outline {
-		--button-text-color: var(--ui-primary);
+		--button-text-color: var(--ui-primary-text-color);
 		--button-bg-color: initial;
-		--button-border: 1px solid var(--ui-primary);
-		--button-hover-text-color: var(--ui-accent-dark);
-		--button-hover-border: 1px solid var(--ui-accent-dark);
-		--button-active-text-color: var(--ui-primary-dark);
-		--button-active-border: 1px solid var(--ui-primary-dark);
+		--button-border: 1px solid var(--ui-primary-text-color);
+		--button-hover-text-color: var(--ui-primary-hover-color);
+		--button-hover-border: 1px solid var(--ui-primary-hover-color);
+		--button-active-text-color: var(--ui-primary-pressed-color);
+		--button-active-border: 1px solid var(--ui-primary-pressed-color);
 	}
 
 	.primary-subtle {
-		--button-text-color: var(--ui-primary);
+		--button-text-color: var(--ui-primary-text-color);
 		--button-bg-color: initial;
-		--button-hover-text-color: white;
-		--button-hover-bg-color: var(--ui-primary);
-		--button-active-text-color: white;
-		--button-active-bg-color: var(--ui-primary-dark);
+		--button-hover-text-color: var(--ui-primary-contrast-color);
+		--button-hover-bg-color: var(--ui-primary-hover-color);
+		--button-active-text-color: var(--ui-primary-contrast-color);
+		--button-active-bg-color: var(--ui-primary-pressed-color);
 	}
 
 	.tertiary {
-		--button-text-color: var(--ui-primary);
+		--button-text-color: var(--ui-tertiary-contrast-color);
 		--button-bg-color: var(--ui-tertiary);
-		--button-hover-bg-color: var(--ui-accent);
-		--button-active-bg-color: var(--ui-tertiary-light);
-		--button-outline-color: var(--ui-accent);
+		--button-hover-bg-color: var(--ui-tertiary-hover-color);
+		--button-active-bg-color: var(--ui-tertiary-pressed-color);
+		--button-outline-color: var(--ui-focus-color);
+	}
+
+	.tertiary-outline {
+		--button-text-color: var(--ui-tertiary-text-color);
+		--button-bg-color: transparent;
+		--button-border: 1px solid var(--ui-tertiary-text-color);
+		--button-hover-text-color: var(--ui-tertiary-contrast-color);
+		--button-hover-bg-color: var(--ui-tertiary-hover-color);
+		--button-active-text-color: var(--ui-tertiary-contrast-color);
+		--button-active-bg-color: var(--ui-tertiary-pressed-color);
+		--button-outline-color: var(--ui-focus-color);
 	}
 
 	.tertiary-subtle {
 		background-color: initial;
-		color: var(--ui-tertiary-dark);
+		color: var(--ui-tertiary-text-color);
 
 		&:hover:not(:disabled) {
-			background-color: rgba(var(--ui-tertiary-dark-rgbc), 0.25);
+			background-color: color-mix(in srgb, var(--ui-tertiary-hover-color) 25%, transparent);
+		}
+
+		&:active:not(:disabled, .effects-disabled) {
+			background-color: color-mix(in srgb, var(--ui-tertiary-pressed-color) 25%, transparent);
 		}
 
 		&:focus-visible {
-			outline-color: var(--ui-tertiary);
+			outline-color: var(--ui-focus-color);
 		}
 
 		:global(.loader) {
-			color: var(--ui-tertiary-dark);
+			color: var(--ui-tertiary-text-color);
 		}
 	}
 
@@ -327,7 +344,7 @@
 		}
 
 		&:focus-visible {
-			outline: solid 0.125rem var(--button-outline-color, var(--ui-accent-dark));
+			outline: solid 0.125rem var(--button-outline-color, var(--ui-focus-color));
 			outline-offset: 0.125rem;
 		}
 
@@ -352,11 +369,11 @@
 
 		.auto-subtle {
 			--button-text-color: white;
-			--button-hover-text-color: white;
+			--button-hover-text-color: var(--ui-primary-contrast-color);
 			--button-hover-bg-color: var(--ui-primary);
-			--button-active-text-color: var(--ui-accent);
+			--button-active-text-color: var(--ui-primary-contrast-color);
 			--button-active-bg-color: var(--ui-primary);
-			--button-outline-color: var(--ui-accent);
+			--button-outline-color: var(--ui-focus-color);
 		}
 	}
 

package/dist/ui/ButtonVariant.d.ts

@@ -6,4 +6,4 @@
  *   - `accent`    → `--ui-accent`    (light brand colour)
  *   - `tertiary`  → `--ui-tertiary`  (supporting colour)
  */
-export type ButtonVariant = 'white' | 'secondary' | 'secondary-subtle' | 'secondary-selected' | 'danger' | 'danger-subtle' | 'auto-subtle' | 'auto-outline' | 'primary' | 'primary-outline' | 'primary-subtle' | 'accent' | 'accent-outline' | 'accent-subtle' | 'tertiary' | 'tertiary-subtle' | 'shaded';
+export type ButtonVariant = 'white' | 'secondary' | 'secondary-subtle' | 'secondary-selected' | 'danger' | 'danger-subtle' | 'auto-subtle' | 'auto-outline' | 'primary' | 'primary-outline' | 'primary-subtle' | 'accent' | 'accent-outline' | 'accent-subtle' | 'tertiary' | 'tertiary-outline' | 'tertiary-subtle' | 'shaded';

package/dist/ui/Dropdown.svelte

@@ -102,7 +102,7 @@
 		display: block;
 		padding: 8px 12px;
 		text-decoration: none;
-		color: var(--ui-primary);
+		color: var(--ui-primary-text-color);
 		transition: background-color 0.2s ease;
 	}
 

package/dist/ui/Loader.svelte

@@ -59,7 +59,7 @@
 		justify-content: center;
 		background-color: rgba(255, 255, 255, 0.75);
 		border-radius: 0.25rem;
-		color: var(--ui-primary);
+		color: var(--ui-primary-text-color);
 	}
 
 	:global(.dark) .full-screen {

package/dist/ui/ProgressBar.svelte

@@ -134,17 +134,17 @@
 	/* Variant colors */
 	.primary {
 		background-color: var(--ui-primary);
-		color: #fff;
+		color: var(--ui-primary-contrast-color);
 	}
 
 	.accent {
 		background-color: var(--ui-accent);
-		color: var(--ui-primary);
+		color: var(--ui-accent-contrast-color);
 	}
 
 	.tertiary {
 		background-color: var(--ui-tertiary);
-		color: var(--ui-primary);
+		color: var(--ui-tertiary-contrast-color);
 	}
 
 	.danger {

package/dist/ui/Tabs.svelte

@@ -112,7 +112,7 @@
 	}
 
 	.tab-item.selected {
-		color: var(--ui-primary);
+		color: var(--ui-primary-text-color);
 	}
 
 	.tab-underline {

package/dist/uiTheme.svelte.d.ts

@@ -1,34 +1,48 @@
-/** Brand colours. Accepts `#rgb`, `#rrggbb` or `rgb(r, g, b)` strings. */
+/** Brand colors. Accepts `#rgb`, `#rrggbb` or `rgb(r, g, b)` strings. */
 export interface ThemeColors {
-    /** Dark brand colour. Used for solid buttons, headings and active states. */
+    /** Primary fill color for solid controls and active backgrounds. */
     primary: string;
-    /** Darker shade of `primary` for pressed states. Derived from `primary` when omitted. */
-    primaryDark?: string;
-    /** Text colour on top of `primary`. Defaults to white. */
-    primaryContrast?: string;
-    /** Light brand colour. Used for highlights, hovers and as the dark-mode accent. */
+    /** Hover color for primary controls. Defaults to the accent text color. */
+    primaryHoverColor?: string;
+    /** Pressed color for primary controls. Darkened from `primary` when omitted. */
+    primaryPressedColor?: string;
+    /** Primary-colored text on page/paper surfaces and unfilled controls. Defaults to `primary`. */
+    primaryTextColor?: string;
+    /** Foreground on primary-filled controls, including hover/pressed fills. Defaults to white. */
+    primaryContrastColor?: string;
+    /** Accent fill color for solid controls and highlights. */
     accent: string;
-    /** Darker shade of `accent`, used for hover text on light surfaces. Derived when omitted. */
-    accentDark?: string;
-    /** Text colour on top of `accent`. Defaults to `primary`. */
-    accentContrast?: string;
-    /** Light supporting colour. Defaults to `accent` when omitted. */
+    /** Hover color for accent controls. Defaults to `tertiary`. */
+    accentHoverColor?: string;
+    /** Pressed color for accent controls. Lightened from `tertiary` (or `accent`) when omitted. */
+    accentPressedColor?: string;
+    /** Accent-colored text on page/paper surfaces and unfilled controls. Darkened from `accent` by default. */
+    accentTextColor?: string;
+    /** Foreground on accent-filled controls, including hover/pressed fills. Defaults to `primary`. */
+    accentContrastColor?: string;
+    /** Tertiary fill color for solid controls. Defaults to `accent` when omitted. */
     tertiary?: string;
-    /** Darker shade of `tertiary`, used for links and subtle text. Derived when omitted. */
-    tertiaryDark?: string;
-    /** Lighter shade of `tertiary`, used for pressed states on light buttons. Derived when omitted. */
-    tertiaryLight?: string;
-    /** Link colour. Defaults to `tertiaryDark`. */
+    /** Hover color for tertiary controls. Defaults to `accent`. */
+    tertiaryHoverColor?: string;
+    /** Pressed color for tertiary and white controls. Lightened from `tertiary` when omitted. */
+    tertiaryPressedColor?: string;
+    /** Tertiary-colored text on page/paper surfaces and unfilled controls. Darkened from `tertiary` by default. */
+    tertiaryTextColor?: string;
+    /** Foreground on tertiary-filled controls, including hover/pressed fills. Defaults to `primary`. */
+    tertiaryContrastColor?: string;
+    /** Keyboard focus ring color. Defaults to the accent text color. */
+    focusColor?: string;
+    /** Link color. Defaults to `tertiaryTextColor`. */
     link?: string;
-    /** Link hover colour. Defaults to `accentDark`. */
+    /** Link hover color. Defaults to `accentTextColor`. */
     linkHover?: string;
 }
 /**
- * Settings that can be given per colour mode. Used as the base (light) config and,
+ * Settings that can be given per color mode. Used as the base (light) config and,
  * with every field optional, as the `dark` override block.
  */
 export interface ThemeModeConfig {
-    /** Brand colours. In the `dark` block any subset may be given; shades are derived per colour. */
+    /** Brand colors. In the `dark` block any subset may be given; shades are derived per color. */
     colors?: Partial<ThemeColors>;
     /**
      * CSS `font-family` value applied to the whole UI, e.g. `"'Inter', system-ui, sans-serif"`.
@@ -44,7 +58,7 @@ export interface ThemeModeConfig {
     variables?: Record<string, string>;
 }
 export interface ThemeConfig extends ThemeModeConfig {
-    /** Brand colours for light mode (and dark mode unless overridden in `dark`). */
+    /** Brand colors for light mode (and dark mode unless overridden in `dark`). */
     colors?: ThemeColors;
     /**
      * Overrides applied while dark mode is active (`.dark` on `<html>`). Anything not
@@ -54,7 +68,7 @@ export interface ThemeConfig extends ThemeModeConfig {
 }
 /** Reactive brand state consumed by components such as `Logo`. */
 export declare const brandState: {
-    /** Logo for the active colour mode: the dark logo when set and dark mode is on, else the light one. */
+    /** Logo for the active color mode: the dark logo when set and dark mode is on, else the light one. */
     readonly logo: string | undefined;
 };
 /**
@@ -63,9 +77,9 @@ export declare const brandState: {
  */
 export declare function setLogo(svg: string | undefined, darkSvg?: string): void;
 /**
- * Build the `--ui-*` custom property map for one colour mode. Only the groups whose
- * base colour is present are emitted, so a partial `dark` block overrides just what
- * it names. Unknown colour formats are passed through unchanged (their `-rgb`
+ * Build the `--ui-*` custom property map for one color mode. Only the groups whose
+ * base color is present are emitted, so a partial `dark` block overrides just what
+ * it names. Unknown color formats are passed through unchanged (their `-rgb`
  * variants are skipped).
  */
 export declare function themeToVariables(config: ThemeModeConfig): Record<string, string>;

package/dist/uiTheme.svelte.js

@@ -29,7 +29,7 @@ let lightLogo = $state(undefined);
 let darkLogo = $state(undefined);
 /** Reactive brand state consumed by components such as `Logo`. */
 export const brandState = {
-    /** Logo for the active colour mode: the dark logo when set and dark mode is on, else the light one. */
+    /** Logo for the active color mode: the dark logo when set and dark mode is on, else the light one. */
     get logo() {
         return themeState.isDarkMode ? (darkLogo ?? lightLogo) : lightLogo;
     }
@@ -66,11 +66,11 @@ function toHex([r, g, b]) {
 function clamp(n) {
     return Math.min(255, Math.max(0, n));
 }
-/** Mix a colour towards black (`amount` 0..1). */
+/** Mix a color towards black (`amount` 0..1). */
 function darken(rgb, amount) {
     return rgb.map((c) => c * (1 - amount));
 }
-/** Mix a colour towards white (`amount` 0..1). */
+/** Mix a color towards white (`amount` 0..1). */
 function lighten(rgb, amount) {
     return rgb.map((c) => c + (255 - c) * amount);
 }
@@ -78,9 +78,9 @@ function lighten(rgb, amount) {
 // Config -> CSS variables
 // ============================================
 /**
- * Build the `--ui-*` custom property map for one colour mode. Only the groups whose
- * base colour is present are emitted, so a partial `dark` block overrides just what
- * it names. Unknown colour formats are passed through unchanged (their `-rgb`
+ * Build the `--ui-*` custom property map for one color mode. Only the groups whose
+ * base color is present are emitted, so a partial `dark` block overrides just what
+ * it names. Unknown color formats are passed through unchanged (their `-rgb`
  * variants are skipped).
  */
 export function themeToVariables(config) {
@@ -90,46 +90,50 @@ export function themeToVariables(config) {
         if (c.primary) {
             const primary = parseColor(c.primary);
             setColor(vars, 'primary', c.primary, primary);
-            vars['--ui-primary-dark'] =
-                c.primaryDark ?? (primary ? toHex(darken(primary, 0.35)) : c.primary);
-            vars['--ui-primary-contrast'] = c.primaryContrast ?? '#ffffff';
-        }
-        else {
-            if (c.primaryDark)
-                vars['--ui-primary-dark'] = c.primaryDark;
-            if (c.primaryContrast)
-                vars['--ui-primary-contrast'] = c.primaryContrast;
+            vars['--ui-primary-pressed-color'] = primary ? toHex(darken(primary, 0.35)) : c.primary;
+            vars['--ui-primary-text-color'] = 'var(--ui-primary)';
+            vars['--ui-primary-contrast-color'] = '#ffffff';
         }
         if (c.accent) {
             const accent = parseColor(c.accent);
             setColor(vars, 'accent', c.accent, accent);
-            vars['--ui-accent-dark'] = c.accentDark ?? (accent ? toHex(darken(accent, 0.5)) : c.accent);
-            vars['--ui-accent-contrast'] = c.accentContrast ?? 'var(--ui-primary)';
-        }
-        else {
-            if (c.accentDark)
-                vars['--ui-accent-dark'] = c.accentDark;
-            if (c.accentContrast)
-                vars['--ui-accent-contrast'] = c.accentContrast;
+            vars['--ui-accent-text-color'] = accent ? toHex(darken(accent, 0.5)) : c.accent;
+            vars['--ui-accent-contrast-color'] = 'var(--ui-primary)';
         }
         const tertiarySource = c.tertiary ?? c.accent;
         if (tertiarySource) {
             const tertiary = parseColor(tertiarySource);
             setColor(vars, 'tertiary', tertiarySource, tertiary);
-            setTertiaryDark(vars, c.tertiaryDark ?? (tertiary ? toHex(darken(tertiary, 0.45)) : tertiarySource));
-            vars['--ui-tertiary-light'] =
-                c.tertiaryLight ?? (tertiary ? toHex(lighten(tertiary, 0.5)) : tertiarySource);
+            vars['--ui-tertiary-text-color'] = tertiary ? toHex(darken(tertiary, 0.45)) : tertiarySource;
+            vars['--ui-tertiary-contrast-color'] = 'var(--ui-primary)';
+            const pressedColor = tertiary ? toHex(lighten(tertiary, 0.5)) : tertiarySource;
+            vars['--ui-accent-pressed-color'] = pressedColor;
+            vars['--ui-tertiary-pressed-color'] = pressedColor;
         }
-        else {
-            if (c.tertiaryDark)
-                setTertiaryDark(vars, c.tertiaryDark);
-            if (c.tertiaryLight)
-                vars['--ui-tertiary-light'] = c.tertiaryLight;
+        // Explicit role overrides work independently, including in partial dark-mode configs.
+        // Hover defaults live in app.css so they follow the current palette without
+        // coupling text, borders, links or focus rings to a custom hover color.
+        const overrides = {
+            primaryHoverColor: '--ui-primary-hover-color',
+            primaryPressedColor: '--ui-primary-pressed-color',
+            primaryTextColor: '--ui-primary-text-color',
+            primaryContrastColor: '--ui-primary-contrast-color',
+            accentHoverColor: '--ui-accent-hover-color',
+            accentPressedColor: '--ui-accent-pressed-color',
+            accentTextColor: '--ui-accent-text-color',
+            accentContrastColor: '--ui-accent-contrast-color',
+            tertiaryHoverColor: '--ui-tertiary-hover-color',
+            tertiaryPressedColor: '--ui-tertiary-pressed-color',
+            tertiaryTextColor: '--ui-tertiary-text-color',
+            tertiaryContrastColor: '--ui-tertiary-contrast-color',
+            focusColor: '--ui-focus-color',
+            link: '--ui-link-color',
+            linkHover: '--ui-link-hover-color'
+        };
+        for (const key of Object.keys(overrides)) {
+            if (c[key])
+                vars[overrides[key]] = c[key];
         }
-        if (c.link)
-            vars['--ui-link-color'] = c.link;
-        if (c.linkHover)
-            vars['--ui-link-hover-color'] = c.linkHover;
     }
     if (config.fontFamily)
         vars['--ui-font-family'] = config.fontFamily;
@@ -147,16 +151,6 @@ function setColor(vars, name, raw, rgb) {
         vars[`--ui-${name}`] = raw;
     }
 }
-function setTertiaryDark(vars, value) {
-    const rgb = parseColor(value);
-    if (rgb) {
-        vars['--ui-tertiary-dark-rgbc'] = rgb.join(', ');
-        vars['--ui-tertiary-dark'] = 'rgb(var(--ui-tertiary-dark-rgbc))';
-    }
-    else {
-        vars['--ui-tertiary-dark'] = value;
-    }
-}
 function toRule(selector, vars) {
     const body = Object.entries(vars)
         .map(([k, v]) => `\t${k}: ${v};`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.6.6",
+  "version": "2.7.0",
   "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
   "author": "Placeholderco",
@@ -56,20 +56,20 @@
     "@sveltejs/kit": "^2.70.3",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@types/node": "^26.5.1",
+    "@types/node": "^26.6.2",
     "globals": "^17.12.0",
-    "prettier": "^3.9.6",
+    "prettier": "^3.9.8",
     "prettier-plugin-svelte": "^4.1.1",
     "publint": "^0.3.24",
     "rimraf": "^6.1.3",
-    "svelte": "^5.57.0",
+    "svelte": "^5.57.1",
     "svelte-check": "^4.7.6",
     "typescript": "^6.0.3",
     "vite": "^8.3.0"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.20.3",
-    "@codemirror/commands": "^6.11.0",
+    "@codemirror/commands": "^6.11.1",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.12",
     "@codemirror/lang-javascript": "^6.2.5",
@@ -80,9 +80,9 @@
     "@codemirror/legacy-modes": "^6.5.4",
     "@codemirror/lint": "^6.9.7",
     "@codemirror/search": "^6.7.2",
-    "@codemirror/state": "^6.7.4",
+    "@codemirror/state": "^6.7.5",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.11",
+    "@codemirror/view": "^6.43.12",
     "@lezer/highlight": "^1.2.3",
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-bubble-menu": "^3.31.3",