eco-vue-js 0.20.2 → 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/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.2",
+  "version": "0.20.3",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.10.0",

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/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/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";