{\n const html = renderToStaticMarkup(\n createElement(Text, { size: \"lg\" }, \"Body\"),\n );\n\n assertStringIncludes(html, \"text-[length:var(--kyla-text-lg)]\");\n assertStringIncludes(html, \"leading-[var(--kyla-text-lg-line-height)]\");\n});\n\nDeno.test(\"Text maps weight to a font-weight token\", () => {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { weight: \"bold\" }, \"Body\")),\n \"font-[weight:var(--kyla-font-weight-bold)]\",\n );\n});\n\nDeno.test(\"Text covers every step of the type and weight scales\", () => {\n // The props' unions derive from these constants, so a step added to a scale\n // without a matching variant entry would type-check and then emit nothing at\n // all — `variants()` skips an unknown key silently.\n for (const size of TYPE_STEPS) {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { size }, \"Body\")),\n `text-[length:var(--kyla-text-${size})]`,\n );\n }\n\n for (const weight of FONT_WEIGHT_STEPS) {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { weight }, \"Body\")),\n `font-[weight:var(--kyla-font-weight-${weight})]`,\n );\n }\n});\n\nDeno.test(\"Text tones resolve to the text-on-surface color tokens\", () => {\n const toneToken: Record = {\n \"fg\": \"fg\",\n \"fg-muted\": \"fg-muted\",\n // `accent`/`danger` are *fill* tokens; text tones must use the AA-verified\n // text-on-surface roles instead, or they render unreadably on a surface.\n \"accent\": \"accent-text\",\n \"danger\": \"danger-text\",\n };\n\n for (\n const [tone, token] of Object.entries(toneToken) as [TextTone, string][]\n ) {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Text, { tone }, \"Body\")),\n `text-[color:var(--kyla-${token})]`,\n );\n }\n});\n\nDeno.test(\"Text emits its size and its tone together\", () => {\n // `text-*` is shared by font-size and color utilities. Without the\n // `length:`/`color:` hints (ADR-0001) twMerge would treat these as conflicting\n // and silently drop one, so assert both survive the same render.\n const html = renderToStaticMarkup(\n createElement(Text, { size: \"sm\", tone: \"fg-muted\" }, \"Body\"),\n );\n\n assertStringIncludes(html, \"text-[length:var(--kyla-text-sm)]\");\n assertStringIncludes(html, \"text-[color:var(--kyla-fg-muted)]\");\n});\n\nDeno.test(\"Text className wins over the component's own conflicting tone\", () => {\n const html = renderToStaticMarkup(\n createElement(\n Text,\n { tone: \"fg\", className: \"text-[color:var(--kyla-accent-text)]\" },\n \"Body\",\n ),\n );\n\n assertStringIncludes(html, \"text-[color:var(--kyla-accent-text)]\");\n assertNotMatch(html, /text-\\[color:var\$--kyla-fg\$\\]/);\n});\n\nDeno.test(\"Text forwards rest props to the underlying element\", () => {\n const html = renderToStaticMarkup(\n createElement(Text, { id: \"intro\", \"data-testid\": \"t\" }, \"Body\"),\n );\n\n assertStringIncludes(html, 'id=\"intro\"');\n assertStringIncludes(html, 'data-testid=\"t\"');\n});\n\nDeno.test(\"Heading renders the heading tag for its level\", () => {\n for (const level of [1, 2, 3, 4, 5, 6] as const) {\n assertMatch(\n renderToStaticMarkup(createElement(Heading, { level }, \"Title\")),\n new RegExp(`^ {\n assertMatch(\n renderToStaticMarkup(createElement(Heading, null, \"Title\")),\n /^

{\n const sizes = ([1, 2, 3, 4, 5, 6] as const).map((level) => {\n const html = renderToStaticMarkup(\n createElement(Heading, { level }, \"Title\"),\n );\n const match = html.match(/text-\\[length:var\$--kyla-text-([\\w-]+)\$\\]/);\n assert(match, `h${level} emitted no type-scale size`);\n return match[1];\n });\n\n assert(\n new Set(sizes).size === sizes.length,\n `each level needs its own step, got ${sizes.join(\", \")}`,\n );\n assertStringIncludes(sizes[0], \"3xl\");\n});\n\nDeno.test(\"Heading is semibold by default and lets an explicit weight win\", () => {\n assertStringIncludes(\n renderToStaticMarkup(createElement(Heading, null, \"Title\")),\n \"font-[weight:var(--kyla-font-weight-semibold)]\",\n );\n assertStringIncludes(\n renderToStaticMarkup(\n createElement(Heading, { weight: \"normal\" }, \"Title\"),\n ),\n \"font-[weight:var(--kyla-font-weight-normal)]\",\n );\n});\n\nDeno.test(\"Heading keeps its semantic level when size is overridden\", () => {\n // A small h1 is still an h1 — styling must not rewrite the document outline.\n const html = renderToStaticMarkup(\n createElement(Heading, { level: 1, size: \"base\" }, \"Title\"),\n );\n\n assertMatch(html, /^

` HTML shell in line with platform conventions (real `.html` file, no inline `

History · components