eco-vue-js 0.20.1 → 0.20.3

package/dist/components/Button/WButtonMoreItem.vue.d.ts

@@ -1,4 +1,5 @@
 import { LinkProps } from '../../types/types';
+import { SemanticType } from '../../utils/SemanticType';
 interface Props extends Partial<LinkProps> {
     /** Label. The `default` slot replaces it. */
     text?: string;
@@ -12,6 +13,8 @@ interface Props extends Partial<LinkProps> {
     download?: string;
     /** Tooltip over the item. */
     tooltipText?: string;
+    /** Color of the item. Types other than `primary` and `secondary` color the text at rest — a red "Delete". */
+    semanticType?: SemanticType;
 }
 type __VLS_Slots = {
     /** Label. Replaces `text`. */

package/dist/components/Button/WButtonMoreItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WButtonMoreItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonMoreItem.vue"],"names":[],"mappings":"AAyBA;AA6DA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAI5C,UAAU,KAAM,SAAQ,OAAO,CAAC,SAAS,CAAC;IACxC,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAWD,KAAK,WAAW,GAAG;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;CAClB,CAAC;AA6EF,QAAA,MAAM,UAAU;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WButtonMoreItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/WButtonMoreItem.vue"],"names":[],"mappings":"AA0BA;AAiEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAA;AAItD,UAAU,KAAM,SAAQ,OAAO,CAAC,SAAS,CAAC;IACxC,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6GAA6G;IAC7G,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B;AAWD,KAAK,WAAW,GAAG;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;CAClB,CAAC;AA+EF,QAAA,MAAM,UAAU;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/Button/WButtonMoreItem.vue_vue_type_script_setup_true_lang.js

@@ -11,6 +11,7 @@ var WButtonMoreItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		href: {},
 		download: {},
 		tooltipText: {},
+		semanticType: {},
 		to: {}
 	},
 	emits: ["click"],
@@ -22,6 +23,7 @@ var WButtonMoreItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				download: __props.download,
 				disabled: __props.disabled,
 				"tooltip-text": __props.tooltipText,
+				"semantic-type": __props.semanticType,
 				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
 			}, {
 				default: withCtx(() => [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])]), renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createBlock(resolveDynamicComponent(__props.icon), {
@@ -34,7 +36,8 @@ var WButtonMoreItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				"href",
 				"download",
 				"disabled",
-				"tooltip-text"
+				"tooltip-text",
+				"semantic-type"
 			]);
 		};
 	}

package/dist/components/Chart/components/HeatmapCell.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,7 @@ var HeatmapCell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const tooltipRef = useTemplateRef("tooltip");
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(["group/cell relative rounded-sm p-(--w-chart-heatmap-gap,0.125rem)", __props.opacity !== null ? "cursor-crosshair" : void 0]) }, [createElementVNode("div", {
-				class: normalizeClass(["size-(--w-chart-heatmap-size,1rem) rounded-sm", __props.empty ? void 0 : __props.opacity !== null ? "bg-current" : "bg-surface-muted/50"]),
+				class: normalizeClass(["size-(--w-chart-heatmap-size,1rem) rounded-sm", __props.empty ? void 0 : __props.opacity !== null ? "bg-current" : "bg-surface-subtle"]),
 				style: normalizeStyle(__props.opacity !== null && !__props.empty ? { opacity: __props.opacity } : void 0)
 			}, null, 6), _ctx.$slots.default && __props.opacity !== null ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("div", { class: normalizeClass(["absolute inset-(--w-chart-heatmap-gap,0.125rem) rounded-sm border-current group-hover/cell:border-2", tooltipRef.value?.isOpen ? "border-2" : void 0]) }, null, 2), createVNode(WTooltip_default, {
 				ref: "tooltip",

package/dist/components/List/components/ListItem.vue_vue_type_script_setup_true_lang.js

@@ -150,7 +150,7 @@ var ListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					class: ["relative", {
 						[__props.cardWrapperClass ?? ""]: true,
 						"w-ripple-trigger-list": isActionShown.value,
-						"sm-not:even:bg-surface-muted/50 grid grid-cols-1": __props.card,
+						"sm-not:even:bg-surface-subtle grid grid-cols-1": __props.card,
 						"flex": !__props.card,
 						"-mb-px": !__props.card && isOpen.value,
 						"w-hover-checked": __props.allowSelectHover

package/dist/components/MenuItem/WMenuItem.vue.d.ts

@@ -1,4 +1,5 @@
 import { LinkProps } from '../../types/types';
+import { SemanticType } from '../../utils/SemanticType';
 interface Props extends Partial<LinkProps> {
     /** Grays the item out and ignores clicks. */
     disabled?: boolean;
@@ -12,6 +13,8 @@ interface Props extends Partial<LinkProps> {
     tooltipText?: string;
     /** Shows a spinner over the item and ignores clicks. */
     loading?: boolean;
+    /** Color of the item. Types other than `primary` and `secondary` color the text at rest — a red "Delete". */
+    semanticType?: SemanticType;
 }
 type __VLS_Slots = {
     /** Content of the item, laid out in a row. */
@@ -22,6 +25,7 @@ declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, i
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onClick?: ((value: MouseEvent) => any) | undefined;
 }>, {
+    semanticType: SemanticType;
     href: string;
     active: boolean;
     tooltipText: string;

package/dist/components/MenuItem/WMenuItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WMenuItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuItem/WMenuItem.vue"],"names":[],"mappings":"AA0DA;AAyGA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAS5C,UAAU,KAAM,SAAQ,OAAO,CAAC,SAAS,CAAC;IACxC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gIAAgI;IAChI,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAmBD,KAAK,WAAW,GAAG;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAC;AAsMF,QAAA,MAAM,UAAU;;;;;UArOP,MAAM;YAIJ,OAAO;iBAEF,MAAM;cAJT,MAAM;6EAuOjB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"WMenuItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuItem/WMenuItem.vue"],"names":[],"mappings":"AA4DA;AAsHA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAS5C,OAAO,EAAC,YAAY,EAAyB,MAAM,sBAAsB,CAAA;AAIzE,UAAU,KAAM,SAAQ,OAAO,CAAC,SAAS,CAAC;IACxC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gIAAgI;IAChI,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6GAA6G;IAC7G,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B;AAoBD,KAAK,WAAW,GAAG;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAC;AAgNF,QAAA,MAAM,UAAU;;;;;kBAxOC,YAAY;UAVpB,MAAM;YAIJ,OAAO;iBAEF,MAAM;cAJT,MAAM;6EAoPjB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/MenuItem/WMenuItem.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
+import { SemanticType, useSemanticTypeTextMap } from "../../utils/SemanticType.js";
 import WRouterLink_default from "../RouterLink/WRouterLink.vue.js";
 import WTooltip_default from "../Tooltip/WTooltip.vue.js";
 import WSpinner_default from "../Spinner/WSpinner.vue.js";
 import IconCheck_default from "../../assets/icons/IconCheck.js";
-import { Transition, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
 //#region src/components/MenuItem/WMenuItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex items-center gap-4" };
 var _hoisted_2 = {
@@ -25,20 +26,26 @@ var WMenuItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		},
 		tooltipText: { default: void 0 },
 		loading: { type: Boolean },
+		semanticType: { default: SemanticType.PRIMARY },
 		to: {}
 	},
 	emits: ["click"],
 	setup(__props) {
+		const props = __props;
+		const semanticTypeTextMap = useSemanticTypeTextMap();
+		const toned = computed(() => props.semanticType !== SemanticType.PRIMARY && props.semanticType !== SemanticType.SECONDARY);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(resolveDynamicComponent(__props.disabled || __props.loading ? "div" : __props.to ? WRouterLink_default : __props.href ? "a" : "button"), mergeProps(__props.disabled || __props.loading ? void 0 : __props.to ? { to: __props.to } : __props.href ? {
 				href: __props.href,
 				download: __props.download
 			} : void 0, {
 				class: ["w-ripple-trigger relative block w-full select-none items-center justify-start px-2 text-start outline-none first:pt-2 last:pb-2", {
-					"tone-primary hover:text-tone cursor-pointer": !__props.disabled && !__props.loading,
+					[unref(semanticTypeTextMap)[__props.semanticType]]: toned.value && !__props.disabled,
+					"tone-primary": !toned.value,
+					"hover:text-tone cursor-pointer": !__props.disabled && !__props.loading,
 					"cursor-not-allowed opacity-50": __props.disabled,
-					"tone-primary text-tone": __props.active && !__props.disabled,
-					"text-description": !__props.active || __props.disabled,
+					"text-tone": __props.active && !__props.disabled,
+					"text-description": !__props.active && !toned.value || __props.disabled,
 					"cursor-progress": __props.loading
 				}],
 				disabled: __props.disabled,

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.20.1",
+  "version": "0.20.3",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.10.0",

package/scripts/color-roles-codemod.js

@@ -7,6 +7,7 @@
  *   'border-gray-300 dark:border-gray-700'           → 'border-line'
  *   'text-negative dark:text-negative-dark'          → 'tone-negative text-tone'
  *   'bg-primary/10 dark:bg-primary-dark/10'          → 'tone-primary bg-tone-fill/10'
+ *   'bg-primary-light dark:bg-primary-darkest'       → 'tone-primary bg-tone-soft'
  *
  *   npx eco-vue-color-roles [--write] [--exact] [--theme <css>] [paths…]     default: src
  *
@@ -37,6 +38,7 @@ const ROLES = [
   {role: 'text-description', color: 'description', props: TEXT_PROPS, light: 'gray-500', dark: 'gray-400'},
   {role: 'text-subtle', color: 'subtle', props: TEXT_PROPS, light: 'gray-400', dark: 'gray-600'},
   {role: 'surface', color: 'surface', props: [...SURFACE_PROPS, 'text'], light: 'default', dark: 'default-dark'},
+  {role: 'surface-subtle', color: 'surface-subtle', props: SURFACE_PROPS, light: 'gray-50', dark: 'gray-850'},
   {role: 'surface-muted', color: 'surface-muted', props: SURFACE_PROPS, light: 'gray-100', dark: 'gray-800'},
   {role: 'surface-inset', color: 'surface-inset', props: SURFACE_PROPS, light: 'gray-200', dark: 'gray-700'},
   {role: 'track', color: 'track', props: ['bg', 'fill', 'stroke'], light: 'gray-300', dark: 'gray-700'},
@@ -59,6 +61,11 @@ const NEUTRAL_UNIFIED = {
   'border:gray-200|gray-800': 'border-line-subtle', // dark 800 → 700
   // Exactly `line-raised`, but in app code these are card borders, not the edge of a popup.
   'border:gray-100|gray-800': 'border-line-subtle', // light 100 → 200, dark 800 → 700
+  // Half of `surface-muted` over the surface, which is what `gray-850` is in dark mode.
+  'bg:gray-50|gray-800/50': 'bg-surface-subtle',
+  'bg:gray-50|gray-800/40': 'bg-surface-subtle', // dark a bit stronger
+  'bg:gray-100/50|gray-800/50': 'bg-surface-subtle',
+  'bg:gray-50|gray-800': 'bg-surface-muted', // light 50 → 100
 }
 
 /**
@@ -157,11 +164,16 @@ const transformClasses = (value, exact, table) => {
     } else {
       const tone = TONES.find(item => lightColor === item && darkColor === item + '-dark' && lightAlpha === darkAlpha)
       const toneProp = TONE_PROPS[/** @type {keyof typeof TONE_PROPS} */ (light.prop)]
+      // `bg-primary-light dark:bg-primary-darkest` is the soft background, which the tone mixes from its fill.
+      const soft = light.prop === 'bg' && TONES.find(item => lightColor === item + '-light' && darkColor === item + '-darkest' && lightAlpha === darkAlpha)
 
       // A tone is set on the whole string, so only strings with one tone and no state variant on it qualify.
       if (tone && toneProp && (toneProp.exact || !exact) && !light.variants && tonesInString.size === 1) {
         next = toneProp.utility + alpha
         addTone = 'tone-' + tone
+      } else if (soft && !exact && !light.variants && tonesInString.size === 1) {
+        next = 'bg-tone-soft' + alpha
+        addTone = 'tone-' + soft
       }
     }
 
@@ -173,14 +185,19 @@ const transformClasses = (value, exact, table) => {
     replaced.push(`${ light.raw } ${ dark.raw } → ${ next }`)
     words[index] = next
     words[darkIndex] = ''
+    // The removed class takes one separator with it: the one before, unless it starts the string or a line. Lines and
+    // their indentation stay as they were.
+    const before = words[darkIndex - 1]
+    const dropAfter = darkIndex === 0 || (before?.includes('\n') && darkIndex + 1 < words.length)
+
+    words[dropAfter ? darkIndex + 1 : darkIndex - 1] = ''
     tokens[index] = null
     tokens[darkIndex] = null
   })
 
-  // Removed classes leave gaps: collapse them, drop spaces left before line breaks, keep the string's own edges.
-  const lead = value.match(/^\s*/)?.[0] ?? ''
-  const trail = value.match(/\s*$/)?.[0] ?? ''
-  let text = lead + words.join('').trim().replace(/[ \t]{2,}/g, ' ').replace(/[ \t]+\n/g, '\n') + trail
+  if (!replaced.length) return {text: value, replaced, unmapped, left: tokens.filter(token => token !== null).map(token => token.raw)}
+
+  let text = words.join('')
 
   if (addTone && !text.split(/\s+/).includes(addTone)) text = text.replace(/^(\s*)/, `$1${ addTone } `)
 

package/tailwind-base/css/markdown/blocks.css

@@ -0,0 +1,127 @@
+/*
+ * Markdown blocks beyond plain markdown, as GitBook writes them: hints, colored text, expandable sections, embedded
+ * videos and quotes with an avatar. A renderer outputs this markup itself:
+ *
+ * - `.hint-{info|success|warning|danger|note}`: a callout box.
+ * - `mark.mark-{blue|green|red|danger|orange|purple}`: colored text; `mark.mark-{blue|green|red}-bg`: a colored
+ *   highlight.
+ * - `details > summary > div`: an expandable section; consecutive sections join into one bordered group.
+ * - `.markdown-embed-video > iframe`, `.markdown-table > div > table` (scrolls sideways), `cite > img + …`,
+ *   `img[data-size="line"]` (an inline image as tall as the text).
+ */
+@layer components {
+  .w-markdown :is(.hint-info, .mark-blue, .mark-blue-bg) {
+    @apply tone-info;
+  }
+
+  .w-markdown :is(.hint-success, .mark-green, .mark-green-bg) {
+    @apply tone-positive;
+  }
+
+  .w-markdown :is(.hint-warning, .mark-orange) {
+    @apply tone-warning;
+  }
+
+  .w-markdown :is(.hint-danger, .mark-red, .mark-danger, .mark-red-bg) {
+    @apply tone-negative;
+  }
+
+  .w-markdown .mark-purple {
+    @apply tone-primary;
+  }
+
+  .w-markdown :is(.hint-info, .hint-success, .hint-warning, .hint-danger, .mark-blue, .mark-green, .mark-orange, .mark-red, .mark-danger, .mark-purple) {
+    @apply bg-tone-soft text-tone;
+  }
+
+  .w-markdown :is(.mark-blue-bg, .mark-green-bg, .mark-red-bg) {
+    @apply bg-tone-fill/40;
+  }
+
+  .w-markdown .hint-note {
+    @apply bg-surface-muted text-description;
+  }
+
+  .w-markdown details {
+    @apply bg-surface border-line relative border-x border-t border-solid p-4;
+  }
+
+  .w-markdown details:first-of-type {
+    @apply rounded-t-lg;
+  }
+
+  .w-markdown details:last-of-type {
+    @apply mb-4 rounded-b-lg border-b;
+  }
+
+  .w-markdown details > div {
+    display: grid;
+  }
+
+  .w-markdown details > :nth-child(2) {
+    margin-top: 2rem;
+  }
+
+  /* Sticks to the top of the scroll container while its section scrolls, covering the content above it. */
+  .w-markdown summary {
+    z-index: 3;
+    margin: -10rem -1rem -1rem;
+    @apply text-description hover:text-accent sticky -top-20 cursor-pointer list-none pt-36 select-none;
+  }
+
+  .w-markdown summary > div {
+    grid-template-columns: auto 1fr auto;
+    @apply bg-surface relative grid gap-4 rounded-md p-4;
+  }
+
+  .w-markdown summary svg {
+    @apply transition-transform self-center;
+  }
+
+  .w-markdown details:open summary svg {
+    @apply rotate-0;
+  }
+
+  .w-markdown .markdown-embed-video {
+    margin-block: 1em;
+    @apply aspect-video w-full;
+  }
+
+  .w-markdown .markdown-embed-video iframe {
+    @apply size-full;
+  }
+
+  .w-markdown .markdown-table,
+  .w-markdown .markdown-table > div {
+    display: grid;
+  }
+
+  .w-markdown .markdown-table > div {
+    @apply not-print:overflow-x-auto;
+  }
+
+  .w-markdown cite {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    column-gap: 1rem;
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+  }
+
+  .w-markdown cite :not(img) {
+    width: 100%;
+  }
+
+  .w-markdown cite img {
+    grid-row: 1 / 4;
+    height: 4.5rem;
+    margin-bottom: 0;
+  }
+
+  .w-markdown img[data-size="line"] {
+    display: inline;
+    height: 1.75em;
+    margin-bottom: 0;
+  }
+}

package/tailwind-base/css/markdown/code.css

@@ -0,0 +1,49 @@
+/*
+ * Markdown code blocks: `pre > code`, one `.line` per line (numbered by the kit's textarea styles). An optional header
+ * before the `code` — `pre > div:first-child`, holding the language and a `.button-copy-code` — sits over its top
+ * padding.
+ */
+@layer components {
+  .w-markdown pre {
+    position: relative;
+    display: grid;
+    white-space: pre;
+    word-break: break-word;
+    background-color: var(--w-input-bg, inherit);
+    @apply mb-3 overflow-x-auto overscroll-x-contain rounded-xl border border-solid border-line-subtle
+      print:whitespace-pre-wrap print:break-all;
+  }
+
+  .w-markdown pre code {
+    font-size: inherit;
+    color: inherit;
+    @apply px-3 py-3 first-not:pt-8 rounded-inherit overscroll-x-contain
+      not-print:max-h-[calc(100vh-6rem)] not-print:overflow-auto;
+  }
+
+  .w-markdown pre code .line {
+    @apply -mx-3;
+  }
+
+  .w-markdown pre code .line::before {
+    @apply pl-3 -left-3;
+  }
+
+  .w-markdown pre > div:first-child {
+    background: inherit;
+    @apply text-description absolute inset-x-0 top-0 flex items-end justify-between gap-2 pt-2 pb-1 pl-3 text-xs;
+  }
+
+  .w-markdown .button-copy-code {
+    @apply hover:text-accent -mt-2 -mb-1 flex items-center gap-2 px-3 pt-2 pb-1 print:hidden;
+  }
+
+  .w-markdown.w-report pre {
+    overflow-x: unset;
+    @apply bg-surface-subtle text-accent whitespace-pre-wrap break-all;
+  }
+
+  .w-markdown.enable-mobile pre {
+    @apply sm-not:px---inner-margin sm-not:border-x-0 sm-not:rounded-none;
+  }
+}

package/tailwind-base/css/markdown/prose.css

@@ -0,0 +1,156 @@
+/*
+ * Markdown text: what any renderer outputs inside `.w-markdown` — headings, paragraphs, lists, quotes, links, inline
+ * code, tables and images. Sizes are in `em`, so the content follows the container's font size.
+ *
+ * Modifiers on `.w-markdown`:
+ * - `enable-mobile`: below `sm`, text keeps the page's inner margin while code blocks and tables reach the screen edges.
+ * - `w-report`: for print — code wraps and its lines don't highlight on hover.
+ */
+@layer components {
+  .w-markdown {
+    isolation: isolate;
+  }
+
+  .w-markdown :is(h1, h2, h3, h4, h5, h6) {
+    margin-block: 0.75em 0.5em;
+    @apply font-medium;
+  }
+
+  .w-markdown h1 {
+    font-size: 1.875em;
+    line-height: 2.25em;
+  }
+
+  .w-markdown h2 {
+    font-size: 1.5em;
+    line-height: 2em;
+  }
+
+  .w-markdown h3 {
+    font-size: 1.25em;
+    line-height: 1.75em;
+  }
+
+  .w-markdown h4 {
+    font-size: 1.125em;
+    line-height: 1.75em;
+    margin-block: 0.5em;
+  }
+
+  .w-markdown h5 {
+    font-size: 1em;
+    line-height: 1.5em;
+    margin-block: 0.5em;
+  }
+
+  .w-markdown h6 {
+    font-size: 0.75em;
+    line-height: 1em;
+    margin-block: 0.5em;
+    @apply font-semibold;
+  }
+
+  .w-markdown p {
+    word-break: break-word;
+    @apply last-not:mb-[0.75em];
+  }
+
+  .w-markdown a {
+    @apply tone-primary text-tone underline;
+  }
+
+  .w-markdown hr {
+    margin-block: 1.25em;
+    @apply border-line;
+  }
+
+  .w-markdown :is(ul, ol) {
+    padding-inline-start: 2.5em;
+    margin-bottom: 0.75em;
+  }
+
+  .w-markdown :is(ul, ol) :is(ul, ol) {
+    margin-inline: 0;
+  }
+
+  .w-markdown ul {
+    list-style-type: disc;
+  }
+
+  .w-markdown ul ul {
+    list-style-type: circle;
+  }
+
+  .w-markdown ul ul ul {
+    list-style-type: square;
+  }
+
+  .w-markdown ol {
+    list-style-type: decimal;
+  }
+
+  .w-markdown blockquote {
+    margin-bottom: 0.75em;
+    padding: 0.5em 1.25em;
+    @apply border-l-4 border-solid border-line-subtle italic;
+  }
+
+  .w-markdown :not(pre) > code {
+    font-size: 90%;
+    @apply tone-primary bg-tone-soft text-tone px-1 rounded-sm;
+  }
+
+  .w-markdown mark {
+    font-size: 90%;
+    @apply tone-warning bg-tone-fill/50 text-accent font-mono px-1 py-0.5 rounded-sm;
+  }
+
+  .w-markdown mark code {
+    background: unset;
+    color: unset;
+    padding: unset;
+  }
+
+  .w-markdown table {
+    margin-bottom: 1.25em;
+    @apply w-full;
+  }
+
+  .w-markdown :is(th, td) {
+    padding: 0.5em;
+  }
+
+  .w-markdown th {
+    @apply text-description font-semibold text-left;
+  }
+
+  .w-markdown tbody tr {
+    @apply border-t border-solid border-line-subtle;
+  }
+
+  .w-markdown tbody tr:nth-child(odd) {
+    @apply bg-surface-subtle;
+  }
+
+  .w-markdown img {
+    display: block;
+    object-fit: contain;
+    margin-bottom: 1em;
+  }
+
+  .w-markdown :is(p, figure) > img {
+    @apply sm-not:-mx-4 sm-not:w-screen sm-not:max-w-screen;
+  }
+
+  .w-markdown.enable-mobile > :is(h1, h2, h3, h4, h5, h6) {
+    @apply sm-not:px---inner-margin;
+  }
+
+  .w-markdown.enable-mobile > :is(p, ul, ol, blockquote) {
+    @apply sm-not:mx---inner-margin;
+  }
+
+  .w-markdown.enable-mobile :is(th, td) {
+    @apply sm-not:first:pl---inner-margin sm-not:last:pr---inner-margin;
+  }
+}

package/tailwind-base/css/roles.css

@@ -21,6 +21,8 @@
 
   --role-surface: var(--color-default);
   --role-surface-dark: var(--color-default-dark);
+  --role-surface-subtle: var(--color-gray-50);
+  --role-surface-subtle-dark: var(--color-gray-850);
   --role-surface-muted: var(--color-gray-100);
   --role-surface-muted-dark: var(--color-gray-800);
   --role-surface-inset: var(--color-gray-200);
@@ -59,6 +61,7 @@
   --color-subtle: var(--w-text-subtle);
 
   --color-surface: var(--w-surface);
+  --color-surface-subtle: var(--w-surface-subtle);
   --color-surface-muted: var(--w-surface-muted);
   --color-surface-inset: var(--w-surface-inset);
   --color-overlay: var(--w-overlay);
@@ -112,6 +115,7 @@
     --w-text-subtle: light-dark(var(--role-text-subtle), var(--role-text-subtle-dark));
 
     --w-surface: light-dark(var(--role-surface), var(--role-surface-dark));
+    --w-surface-subtle: light-dark(var(--role-surface-subtle), var(--role-surface-subtle-dark));
     --w-surface-muted: light-dark(var(--role-surface-muted), var(--role-surface-muted-dark));
     --w-surface-inset: light-dark(var(--role-surface-inset), var(--role-surface-inset-dark));
     --w-overlay: light-dark(var(--role-overlay), var(--role-overlay-dark));

package/tailwind-base/css/textarea.css

@@ -1,6 +1,10 @@
-/* Multiline WInput (`textarea`): one `.line` per line, with a sticky line number and the active line highlighted. */
+/*
+ * Numbered lines: one `.line` per line, wrapping its text in a `div`, with a sticky line number. Used by the multiline
+ * WInput (`w-textarea`) and by markdown code blocks. The active line (`line-active`) is highlighted, and so is the
+ * hovered one in a read-only textarea (`group/field`) or a markdown code block.
+ */
 @layer components {
-  .w-textarea {
+  :is(.w-textarea, .w-markdown pre code) {
     counter-reset: w-textarea-lines;
     display: grid;
     grid-template-columns: auto 1fr;
@@ -8,7 +12,7 @@
     background: inherit;
   }
 
-  .w-textarea .line {
+  :is(.w-textarea, .w-markdown pre code) .line {
     counter-increment: w-textarea-lines;
     display: grid;
     grid-template-columns: subgrid;
@@ -16,7 +20,7 @@
     background: inherit;
   }
 
-  .w-textarea .line::before {
+  :is(.w-textarea, .w-markdown pre code) .line::before {
     content: counter(w-textarea-lines);
     position: sticky;
     left: 0;
@@ -25,41 +29,25 @@
     padding-right: --spacing(2);
     text-align: end;
     font-weight: 300;
-    color: var(--color-gray-400);
+    color: light-dark(var(--color-gray-400), var(--color-gray-500));
     background-color: inherit;
     text-security: none;
     -webkit-text-security: none;
   }
 
-  .w-textarea .line > div {
+  :is(.w-textarea, .w-markdown pre code) .line > div {
     padding-right: var(--w-option-padding);
   }
 
-  .w-textarea .line > div > * {
+  :is(.w-textarea, .w-markdown pre code) .line > div > * {
     vertical-align: top;
   }
 
-  .w-textarea .line.line-active > div,
-  .w-textarea.group\/field .line:hover > div {
-    background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+  :is(.w-textarea .line.line-active, .w-textarea.group\/field .line:hover, .w-markdown:not(.w-report) pre code .line:hover) > div {
+    background-color: color-mix(in oklab, var(--w-primary) 10%, transparent);
   }
 
-  .w-textarea .line.line-active::before,
-  .w-textarea.group\/field .line:hover::before {
-    color: var(--color-black-default);
-  }
-
-  .dark .w-textarea:not(:is(.light *)) .line::before {
-    color: var(--color-gray-500);
-  }
-
-  .dark .w-textarea:not(:is(.light *)) .line.line-active > div,
-  .dark .w-textarea.group\/field:not(:is(.light *)) .line:hover > div {
-    background-color: color-mix(in oklab, var(--color-primary-dark) 10%, transparent);
-  }
-
-  .dark .w-textarea:not(:is(.light *)) .line.line-active::before,
-  .dark .w-textarea.group\/field:not(:is(.light *)) .line:hover::before {
-    color: var(--color-default);
+  :is(.w-textarea .line.line-active, .w-textarea.group\/field .line:hover, .w-markdown:not(.w-report) pre code .line:hover)::before {
+    color: var(--w-text-accent);
   }
 }

package/tailwind-base/css/theme.css

@@ -14,8 +14,8 @@
    */
   --color-primary: oklch(55% 0.17 286.8);
   --color-primary-dark: var(--color-primary);
-  --color-primary-light: color-mix(in oklab, var(--color-primary) 10%, var(--color-default));
-  --color-primary-darkest: color-mix(in oklab, var(--color-primary-dark) 20%, var(--color-default-dark));
+  --color-primary-light: color-mix(in oklab, var(--color-primary) 7%, var(--color-default));
+  --color-primary-darkest: color-mix(in oklab, var(--color-primary-dark) 10%, var(--color-default-dark));
 
   --color-black-default: #333333;
   --color-black-light: #4f4f4f;

package/tailwind-base/markdown.css

@@ -0,0 +1,8 @@
+/*
+ * Styles for rendered markdown in `.w-markdown`. Import after `base.css`:
+ *
+ *   @import "eco-vue-js/tailwind-base/markdown.css";
+ *   @import "eco-vue-js/tailwind-base/css/markdown/blocks.css";  // GitBook blocks: hints, colored text, details…
+ */
+@import "./css/markdown/prose.css";
+@import "./css/markdown/code.css";