plass-ui 1.4.0 → 1.6.0

package/dist/tokens.css

@@ -56,8 +56,11 @@
  * surface rather than looked at.
  *
  * Three values are hand-picked per family and everything else is derived with
- * `color-mix()`, so **adding a colour family is two edits**: one entry in
- * `PlassColor` and three lines here (plus its `accent` in each theme).
+ * `color-mix()`. Adding a family is still five places, though: one entry in
+ * `PlassColor`, those three lines here, an `accent` in each of the three theme
+ * blocks below, the eight derived declarations, which are written out per
+ * family rather than generated, and the Flutter package's own enum and
+ * families.
  *
  * `solid` and `solid-to` are the two ends of the gradient, at 135° — the
  * top-left corner and the bottom-right one. They are a **hue sweep at one
@@ -567,11 +570,21 @@
  * resolves its `var()`s on the element that declares it — declaring these only
  * on `:root` would freeze `--plass-*-tint` to the light theme's
  * `--plass-tint-strength` inside a `.dark` subtree.
+ *
+ * `.plass-theme` is the same reasoning applied to a *colour* override. Setting
+ * `--plass-primary-solid` on a `<div>` changes the base and nothing else,
+ * because every value derived from it was computed further up, where the old
+ * colour still is. The class re-runs the whole block on that element, so the
+ * gradient, the tint, the hairline and the ring follow the base that was just
+ * written beside them. It is the one hook here that does not force a theme:
+ * `--plass-tint-strength` and the rest inherit from whichever theme root is
+ * above, so a scoped family works the same in light and in dark.
  * ------------------------------------------------------------------------- */
 
 :root,
 .dark,
 .light,
+.plass-theme,
 [data-theme='dark'],
 [data-theme='light'] {
   /* The elevation ladder. Neutral, wide and faint — it climbs by *blur* far
@@ -611,7 +624,11 @@
   --plass-primary-soft-press: color-mix(in srgb, var(--plass-primary-accent) 26%, transparent);
   --plass-primary-line: color-mix(in srgb, var(--plass-primary-accent) 30%, transparent);
   --plass-primary-line-hover: color-mix(in srgb, var(--plass-primary-accent) 48%, transparent);
-  --plass-primary-ring: color-mix(in srgb, var(--plass-primary-solid) 55%, transparent);
+  /* The focus ring is the accent at full strength, because it is read against
+     the page rather than looked at: the ring has to clear 3:1 against the
+     sheet round a control in both themes, and only the per-theme accent does.
+     `solid` is one colour for both, and amber on white cannot reach it. */
+  --plass-primary-ring: var(--plass-primary-accent);
 
   --plass-secondary-fill: linear-gradient(
     135deg,
@@ -628,7 +645,7 @@
   --plass-secondary-soft-press: color-mix(in srgb, var(--plass-secondary-accent) 26%, transparent);
   --plass-secondary-line: color-mix(in srgb, var(--plass-secondary-accent) 30%, transparent);
   --plass-secondary-line-hover: color-mix(in srgb, var(--plass-secondary-accent) 48%, transparent);
-  --plass-secondary-ring: color-mix(in srgb, var(--plass-secondary-solid) 55%, transparent);
+  --plass-secondary-ring: var(--plass-secondary-accent);
 
   --plass-success-fill: linear-gradient(
     135deg,
@@ -645,7 +662,7 @@
   --plass-success-soft-press: color-mix(in srgb, var(--plass-success-accent) 26%, transparent);
   --plass-success-line: color-mix(in srgb, var(--plass-success-accent) 30%, transparent);
   --plass-success-line-hover: color-mix(in srgb, var(--plass-success-accent) 48%, transparent);
-  --plass-success-ring: color-mix(in srgb, var(--plass-success-solid) 55%, transparent);
+  --plass-success-ring: var(--plass-success-accent);
 
   --plass-warning-fill: linear-gradient(
     135deg,
@@ -662,7 +679,7 @@
   --plass-warning-soft-press: color-mix(in srgb, var(--plass-warning-accent) 28%, transparent);
   --plass-warning-line: color-mix(in srgb, var(--plass-warning-accent) 34%, transparent);
   --plass-warning-line-hover: color-mix(in srgb, var(--plass-warning-accent) 52%, transparent);
-  --plass-warning-ring: color-mix(in srgb, var(--plass-warning-solid) 55%, transparent);
+  --plass-warning-ring: var(--plass-warning-accent);
 
   --plass-danger-fill: linear-gradient(
     135deg,
@@ -679,7 +696,7 @@
   --plass-danger-soft-press: color-mix(in srgb, var(--plass-danger-accent) 26%, transparent);
   --plass-danger-line: color-mix(in srgb, var(--plass-danger-accent) 30%, transparent);
   --plass-danger-line-hover: color-mix(in srgb, var(--plass-danger-accent) 48%, transparent);
-  --plass-danger-ring: color-mix(in srgb, var(--plass-danger-solid) 55%, transparent);
+  --plass-danger-ring: var(--plass-danger-accent);
 
   --plass-info-fill: linear-gradient(
     135deg,
@@ -696,7 +713,7 @@
   --plass-info-soft-press: color-mix(in srgb, var(--plass-info-accent) 26%, transparent);
   --plass-info-line: color-mix(in srgb, var(--plass-info-accent) 30%, transparent);
   --plass-info-line-hover: color-mix(in srgb, var(--plass-info-accent) 48%, transparent);
-  --plass-info-ring: color-mix(in srgb, var(--plass-info-solid) 55%, transparent);
+  --plass-info-ring: var(--plass-info-accent);
   /* The three greys a chart draws its frame with, derived so a project that
      re-tones its border moves the grid with it.
 
@@ -792,6 +809,17 @@
  * never re-renders — the component writes the two custom properties directly.
  * ------------------------------------------------------------------------- */
 
+/*
+ * A stacking context of the surface's own, which is what lets the bloom below
+ * sit at a negative depth without falling through the surface it belongs to.
+ * `isolation` rather than a `z-index`, because a z-index is a position in a
+ * stack somebody else owns and this is only a statement that the two layers are
+ * the surface's business.
+ */
+.plass-glow {
+  isolation: isolate;
+}
+
 .plass-glow::before,
 .plass-glow::after {
   content: '';
@@ -802,8 +830,20 @@
   opacity: 0;
 }
 
-/* The bloom trailing the pointer across the surface. */
+/*
+ * The bloom trailing the pointer across the surface.
+ *
+ * **Under the label, and over the fill.** A positioned pseudo-element otherwise
+ * paints above every in-flow thing in the box, so the bloom was laid over the
+ * words on a key and over the value in a field — faint enough to miss on a
+ * white label and not on dark ink. `z-index: -1` puts it where a stacking
+ * context paints a negative layer, which is after the element's own background
+ * and before its content: over the gradient, under what is written on it. The
+ * flash below stays where it is, over everything, which is the pair the Flutter
+ * build draws as two separate widgets on either side of the label.
+ */
 .plass-glow::before {
+  z-index: -1;
   background: radial-gradient(
     6rem circle at var(--p-mx, 50%) var(--p-my, 50%),
     var(--p-glow, transparent),
@@ -1194,6 +1234,190 @@
  * drift.
  * ------------------------------------------------------------------------- */
 
+/*
+ * The per-breakpoint slots do not inherit. Each one is written inline on the
+ * element that reads it, and a custom property is inherited by default, so a
+ * `PlFlex` nested in another took every rung its parent named and it did not:
+ * a vertical flex inside `{ xs: 'vertical', md: 'horizontal' }` turned
+ * horizontal at `md`, and a `PlGridItem` with no `span` inside a cell of eight
+ * was eight columns wide. The slots they resolve into (`--p-cols`, `--p-gap-x`)
+ * still inherit, which is how a grid item reads its grid.
+ */
+@property --p-gap-x-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-x-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-gap-y-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-cols-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-dir-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-span-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-offset-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-maxw-xl {
+  syntax: '*';
+  inherits: false;
+}
+
 .plass-grid,
 .plass-flex {
   --p-gap-x: var(--p-gap-x-xs, 0px);
@@ -1681,13 +1905,28 @@
   animation-name: plass-anim-lighting;
   animation-duration: var(--p-anim-duration, 3s);
   animation-delay: var(--p-anim-delay, 0ms);
-  animation-timing-function: linear;
+  /* Linear unless a caller says otherwise, which is what `curve` does in the
+     Flutter build: an arc that eases at both ends of a turn that has no ends
+     reads as a stutter, and that is a default rather than a rule. */
+  animation-timing-function: var(--p-anim-ease, linear);
   animation-iteration-count: var(--p-anim-repeat, infinite);
   animation-direction: var(--p-anim-direction, normal);
   animation-fill-mode: both;
   animation-play-state: var(--p-anim-state, running);
 }
 
+/*
+ * The rewind, for the one effect that runs on a pseudo-element.
+ *
+ * Restarting a CSS animation means clearing its name, forcing the style to
+ * settle and putting the name back, and an inline style cannot reach a
+ * `::before`. So the root carries `data-plass-rewind` for the length of that
+ * read, and this is what answers it. Nothing is painted in between.
+ */
+.plass-anim-lighting[data-plass-rewind]::before {
+  animation-name: none;
+}
+
 /*
  * Marquee: two identical copies, both moving by exactly one copy plus the gap.
  *
@@ -1725,6 +1964,12 @@
   flex-direction: column;
 }
 
+/* Inset, so a box inside something that clips does not lose its ring. */
+.plass-marquee:focus-visible {
+  outline: 2px solid var(--plass-primary-ring);
+  outline-offset: -2px;
+}
+
 .plass-marquee-track {
   display: flex;
   flex: 0 0 auto;
@@ -1930,8 +2175,13 @@
   --p-code-del: oklch(75% 0.15 25);
 }
 
+/* Both ways of forcing light are named, the same pair the token block above
+   answers to. `auto` means "whatever the page is", so a page that has said it
+   is light with `.light` and one that has said it with `[data-theme='light']`
+   have to leave the block light alike — otherwise the page is white and the
+   code on it is the one dark rectangle nobody asked for. */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) .plass-code[data-code-theme='auto'] {
+  :root:not(.light):not([data-theme='light']) .plass-code[data-code-theme='auto'] {
     --p-code-bg: oklch(19.5% 0.014 262);
     --p-code-fg: oklch(90% 0.012 262);
 
@@ -2323,10 +2573,11 @@
  * arrangement that still reads as a set.
  *
  * The three lines below are what the slot is *for*. A grid and a quilt lay out
- * in CSS Grid off `--p-cols`; a masonry deals its items into that many lanes in
- * JavaScript, because which lane an item lands in changes the DOM and no
- * stylesheet can do that; and a justified row is flexbox, which needs no count
- * at all — it fills to the edge with whatever fits.
+ * in CSS Grid off `--p-cols`; a masonry deals its items into lanes in JavaScript
+ * and writes the count and the rows inline, because which lane an item lands in
+ * depends on the heights of the items before it and no stylesheet can work that
+ * out; and a justified row is flexbox, which needs no count at all — it fills
+ * to the edge with whatever fits.
  * ------------------------------------------------------------------------- */
 
 .plass-gallery-grid,
@@ -2334,6 +2585,32 @@
   grid-template-columns: repeat(var(--p-cols, 2), minmax(0, 1fr));
 }
 
+/*
+ * What holds a justified gallery's last row down.
+ *
+ * Every tile is grown in proportion to its own width, which is what makes a row
+ * come out one height once it has been stretched to the edge. The last row is
+ * the exception: it has fewer tiles and the same width to share, so they stretch
+ * further than any row above them — one leftover photograph ends up filling the
+ * whole width and standing two or three times as tall as the gallery it belongs
+ * to.
+ *
+ * An empty `::after` with an absurd `flex-grow` eats the leftover width instead,
+ * so the real tiles keep their basis and the row lands at the height it was
+ * aiming for. It has to be a pseudo-element rather than a filler item: the list
+ * is a `<ul>` with `role="list"`, and an extra `<li>` would be an extra item in
+ * it — a photograph that is not there, counted by every screen reader that
+ * announces how many there are.
+ *
+ * It costs a row of nothing when the last row happens to be full, which is why
+ * the flex-basis is zero.
+ */
+.plass-gallery-justified::after {
+  content: '';
+  flex-grow: 1000000;
+  flex-basis: 0;
+}
+
 /* ---------------------------------------------------------------------------
  * Reduced motion
  *
@@ -2405,6 +2682,27 @@
     animation: none;
   }
 
+  /*
+   * A marquee that stops would leave everything past the edge of its box out
+   * of sight for good. One copy is drawn, and the box scrolls along it instead
+   * of clipping it, so the strip stays one line rather than wrapping down the
+   * page; a platform that draws a permanent scrollbar adds only the bar. The
+   * component makes the box a tab stop while it scrolls.
+   */
+  .plass-marquee {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .plass-marquee-vertical {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .plass-marquee-track + .plass-marquee-track {
+    display: none;
+  }
+
   /* The arc stops travelling and becomes an even glow. The same trade the
      skeleton makes: the decoration survives, the motion does not. */
   .plass-anim-lighting::before {

package/dist/types.d.ts

@@ -107,6 +107,21 @@ export type PlassAlignSelf = 'auto' | 'start' | 'center' | 'end' | 'stretch' | '
  * as a `<div>`.
  */
 export type PlassPosition = 'static' | 'sticky' | 'fixed';
+/**
+ * What a scroller does with a gesture it has run out of room for, spelled the
+ * way CSS spells it.
+ *
+ * - `contain` — keeps it. The pointer being inside the strip is the reader
+ *   saying which of the two things under it they meant to move, and that answer
+ *   does not change the moment the strip reaches its end. A shelf that fits its
+ *   box is not a scroller and never holds anything back, so what this contains
+ *   is only a gesture that was moving *something*.
+ * - `auto` — hands it back to the page, which is what a nested scroller does
+ *   left alone. Even here the strip keeps the wheel while the gesture that was
+ *   scrolling it is still running: a page that jumps out from under a flick is
+ *   the thing chaining was supposed to be sparing the reader.
+ */
+export type PlassOverscroll = 'auto' | 'contain';
 /**
  * Which corner of a box something is pinned to. `PlBadge` reads this.
  *
@@ -116,6 +131,52 @@ export type PlassPosition = 'static' | 'sticky' | 'fixed';
  * a caller spell `{ vertical: 'left' }`.
  */
 export type PlassCorner = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+/**
+ * Where a **field-shaped** control puts the name of what it holds.
+ *
+ * The placements a box has to offer, which are not the placements a tick has:
+ * a PlCheckbox, a PlRadio and a PlSwitch put their label beside themselves and
+ * take `labelPlacement` out of `PlassAlign` instead — same question, same prop
+ * name, the answers each shape actually has. See `PlSwitchLabelPlacement`.
+ *
+ * - `top` — above the control, on its own line. The default, and the one that
+ *   is always safe: the label is a block of text in the layout, it can wrap, it
+ *   can be as long as it needs to be, and nothing about the control's edge has
+ *   to make room for it.
+ * - `notch` — in the control's own top edge, with the hairline cut away behind
+ *   it. The label stops being a line of the form and becomes part of the field,
+ *   which buys back a row of vertical space and ties the name to the box rather
+ *   than to whatever is above it.
+ *
+ * The cut is a real one — a `<legend>` in a `<fieldset>`, which is the only way
+ * to take a segment out of a border without knowing what is behind it. Nothing
+ * here paints over the line with the page's colour, because a library that does
+ * not paint the page cannot know what colour that is, and a Plass field is
+ * translucent besides.
+ *
+ * Two things follow from the label sitting on the edge, and both are deliberate:
+ *
+ * - **Focus is the edge thickening rather than a ring.** An outline is a
+ *   rectangle and would run straight through the label. The edge that is
+ *   already there goes to 2px and takes the family's colour instead, which is
+ *   what the flush ring was drawn to look like anyway.
+ * - **The label no longer widens the control.** It is out of the flow, so a
+ *   label longer than a narrow field runs past its end. Give the field
+ *   `fullWidth`, or keep the word short — a notch is a place for "Email", not
+ *   for a sentence.
+ *
+ * Only `glass` has a hairline to cut. On `solid` and `ghost` the label sits in
+ * the same place and there is simply nothing there to take out, so a form that
+ * mixes the three keeps one baseline for its labels.
+ *
+ * **`PlOtpField` is the one labelled field that does not take this**, and the
+ * reason is the same one that decides everything above: a notch is a segment
+ * taken out of one continuous edge, and a row of separate boxes with gaps
+ * between them has no such edge. Cutting only the first box leaves the word
+ * lying across the two after it, which is worse than the label above the row
+ * that it keeps.
+ */
+export type PlassFieldLabelPlacement = 'top' | 'notch';
 /**
  * What a surface is made of. This is the library's own name, and the two
  * materials in it are the whole design language.
@@ -516,9 +577,18 @@ export interface PlassChartSeries {
      * @default false
      */
     hidden?: boolean;
+    /**
+     * Draws the line dashed — a forecast, a target, a last year.
+     *
+     * Only a line has a line to dash, so it does nothing on a bar, and nothing on
+     * a stacked area either, where the band's fill *is* the mark and there is no
+     * stroke along its top.
+     * @default false
+     */
+    dashed?: boolean;
 }
 /**
- * One span on a [PlTimelineChart] — a stretch of time with two ends.
+ * One span on a `PlTimelineChart` — a stretch of time with two ends.
  *
  * Its own type rather than a `z2` or an `x2` bolted onto `PlassChartPoint`,
  * because a second position on the axis is a field the other six charts would
@@ -540,34 +610,6 @@ export interface PlassTimelinePoint {
     /** Overrides its row's colour for this one span. */
     color?: PlassColor | (string & {});
 }
-/**
- * One row of a PlTimelineChart, and everything on it.
- *
- * A row is a series — one entity, one name, one colour — but its data are
- * spans rather than values, so it cannot be a `PlassChartSeries`. There is no
- * `hidden` here and no legend to pair it with: a Gantt's rows *are* its
- * category axis, already named down the side, and a twenty-entry legend
- * restating them is not a filter anyone wants.
- */
-export interface PlassTimelineSeries {
-    /** Its name on the axis, in the tooltip and in the table. */
-    name?: string;
-    /** The spans on this row. Overlapping ones are drawn over each other. */
-    data: readonly PlassTimelinePoint[];
-    /** Overrides the palette slot this row would otherwise take. */
-    color?: PlassColor | (string & {});
-}
-/** One stretch of time on a row of a `PlTimelineChart`. */
-export interface PlassTimelinePoint {
-    /** When it begins. A `Date`, or a number of milliseconds. */
-    start: PlassChartCategory;
-    /** And when it is done. A span that ends before it starts is drawn either way round. */
-    end: PlassChartCategory;
-    /** What the span is called, in the tooltip and the table. */
-    label?: React.ReactNode;
-    /** Overrides its row's colour for this one span. */
-    color?: PlassColor | (string & {});
-}
 /**
  * One row of a `PlTimelineChart`, and everything on it.
  *

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "plass-ui",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "A React UI component library made of glass and gradients — smooth tinted surfaces, shadows in their own colour, and light that follows the pointer. Accessible and themeable, ESM only, types included, dark mode built in.",
   "type": "module",
   "types": "dist/index.d.ts",
   "sideEffects": [
     "**/*.css"
   ],
-  "author": "CDGet <jooy2.contact@gmail.com>",
+  "author": "CDGet (https://cdget.com)",
   "license": "MIT",
   "homepage": "https://plass.cdget.com",
   "repository": {
@@ -128,22 +128,22 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.4.0",
+    "@types/node": "^26.4.1",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "@typescript-eslint/parser": "^8.68.0",
+    "@types/react-dom": "^19.2.7",
+    "@typescript-eslint/parser": "^8.69.0",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/browser": "^4.1.11",
-    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/browser": "^5.0.0",
+    "@vitest/browser-playwright": "^5.0.0",
     "esbuild": "^0.28.2",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-n": "^18.3.0",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "globals": "^17.11.0",
+    "globals": "^17.12.0",
     "jiti": "^2.7.0",
-    "playwright": "^1.62.1",
-    "postcss": "^8.5.26",
+    "playwright": "^1.63.0",
+    "postcss": "^8.5.28",
     "prettier": "^3.9.6",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "react": "^19.2.8",
@@ -151,14 +151,14 @@
     "tailwindcss": "^4.3.3",
     "terser": "^5.51.2",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.68.0",
+    "typescript-eslint": "^8.69.0",
     "vite": "^8.2.2",
-    "vitest": "^4.1.11",
-    "vitest-browser-react": "^2.2.0"
+    "vitest": "^5.0.0",
+    "vitest-browser-react": "^2.3.0"
   },
   "dependencies": {
-    "@base-ui/react": "^1.7.0",
-    "highlight.js": "^11.11.1"
+    "@base-ui/react": "^1.8.0",
+    "highlight.js": "^11.12.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",