@tenphi/renderer 0.22.1 → 0.24.0

package/dist/components/Header.styles.js

@@ -16,8 +16,8 @@ export const HeaderRoot = defineComponent("Header", {
     Primary: {
       display: "flex",
       alignItems: "center",
-      gap: { "": "clamp(0.5rem, 1.5vw, 1.5rem)", "@mobile": "0.5rem" },
-      blockSize: { "": "4.5rem", "@mobile": "3.5rem" },
+      gap: { "": "clamp(0.5rem, 1.5vw, 1.5rem)", "!@md": "0.5rem" },
+      blockSize: { "": "4.5rem", "!@md": "3.5rem" },
       flexShrink: "0",
     },
     Title: {
@@ -28,7 +28,7 @@ export const HeaderRoot = defineComponent("Header", {
       overflow: "hidden",
       flexShrink: "1",
       inlineSize: "min 0",
-      inlineMargin: { "": "0 end", "@mobile": "auto end" },
+      inlineMargin: { "": "0 end", "!@md": "auto end" },
     },
     LogoLink: {
       display: "inline-grid",
@@ -38,14 +38,14 @@ export const HeaderRoot = defineComponent("Header", {
       textDecoration: "none",
     },
     Logo: {
-      inlineSize: { "": "2rem", "@mobile": "1.75rem" },
-      blockSize: { "": "2rem", "@mobile": "1.75rem" },
+      inlineSize: { "": "2rem", "!@md": "1.75rem" },
+      blockSize: { "": "2rem", "!@md": "1.75rem" },
     },
     SiteTitle: {
       inlineSize: "min 0",
       overflow: "hidden",
       color: "#text",
-      preset: { "": "h4", "@mobile": "h5" },
+      preset: { "": "h4", "!@md": "h5" },
       textDecoration: "none",
       whiteSpace: "nowrap",
       textOverflow: "ellipsis",
@@ -54,10 +54,10 @@ export const HeaderRoot = defineComponent("Header", {
       $: "Primary > Search",
       display: "flex",
       alignItems: "center",
-      flexGrow: { "": "1", "@mobile": "0" },
-      flexShrink: { "": "1", "@mobile": "0" },
-      inlineSize: { "": "min 0", "@mobile": "$docs-menu-button-size" },
-      inlineMargin: { "": "auto", "@mobile": "0" },
+      flexGrow: { "": "1", "!@md": "0" },
+      flexShrink: { "": "1", "!@md": "0" },
+      inlineSize: { "": "min 0", "!@md": "$docs-menu-button-size" },
+      inlineMargin: { "": "auto", "!@md": "0" },
     },
     SearchElement: {
       $: "Search site-search",
@@ -66,7 +66,7 @@ export const HeaderRoot = defineComponent("Header", {
     },
     Tools: {
       display: "flex",
-      hide: { "": false, "@mobile": true },
+      hide: { "": false, "!@md": true },
       flow: "row",
       alignItems: "center",
       justifyContent: "flex-end",
@@ -78,7 +78,7 @@ export const HeaderRoot = defineComponent("Header", {
     },
     MobileTheme: {
       display: "grid",
-      hide: { "": true, "@mobile": false },
+      hide: { "": true, "!@md": false },
       flexShrink: "0",
       order: "1",
       inlineSize: "$docs-menu-button-size",
@@ -86,7 +86,7 @@ export const HeaderRoot = defineComponent("Header", {
     },
     MobileLanguage: {
       display: "grid",
-      hide: { "": true, "@mobile": false },
+      hide: { "": true, "!@md": false },
       flexShrink: "0",
       order: "1",
       inlineSize: "$docs-menu-button-size",

package/dist/components/HeaderLinks.astro

@@ -23,7 +23,7 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 {
   links.length > 0 && (
     <HeaderLinksRoot>
-      <nav class="td-header-links__desktop" aria-label={ui.headerLinks}>
+      <nav data-element="Desktop" aria-label={ui.headerLinks}>
         {links.map((link) => (
           <a
             href={href(link.link)}
@@ -37,7 +37,7 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
       </nav>
       <button
         type="button"
-        class="td-header-links__trigger"
+        data-element="Trigger"
         popovertarget="cookbook-header-links"
         aria-label={ui.more}
         title={ui.more}
@@ -56,14 +56,10 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
           </>
         </svg>
       </button>
-      <div
-        id="cookbook-header-links"
-        popover="auto"
-        class="td-header-links__panel"
-      >
+      <div id="cookbook-header-links" popover="auto" data-element="Panel">
         <button
           type="button"
-          class="td-header-links__close"
+          data-element="Close"
           popovertarget="cookbook-header-links"
           popovertargetaction="hide"
           aria-label={ui.closeMore}

package/dist/components/HeaderLinks.styles.js

@@ -9,12 +9,12 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
   styles: {
     display: "flex",
     flexShrink: "0",
-    order: { "": "0", "@mobile": "2" },
+    order: { "": "0", "!@md": "2" },
     "$popover-transition": "120ms",
     Desktop: {
-      $: ".td-header-links__desktop",
+      $: "Desktop",
       display: "flex",
-      hide: { "": false, "@mobile": true },
+      hide: { "": false, "!@md": true },
       alignItems: "center",
       gap: "($gap * 0.5)",
     },
@@ -33,7 +33,7 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
       whiteSpace: "nowrap",
     },
     DesktopLink: {
-      $: ".td-header-links__desktop a",
+      $: "Desktop a",
       radius: "$header-control-radius",
       inlinePadding: "($gap * 2)",
     },
@@ -58,9 +58,9 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
       },
     },
     Trigger: {
-      $: ".td-header-links__trigger",
+      $: "Trigger",
       display: "grid",
-      hide: { "": true, "@mobile": false },
+      hide: { "": true, "!@md": false },
       placeItems: "center",
       inlineSize: "$docs-menu-button-size",
       blockSize: "$docs-menu-button-size",
@@ -71,12 +71,12 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
       fill: "#clear",
     },
     HoverTrigger: {
-      $: ".td-header-links__trigger",
+      $: "[data-element=Trigger]",
       color: { "": null, "@own(:hover)": "#text" },
       fill: { "": null, "@own(:hover)": "#surface-2-hover" },
     },
     Panel: {
-      $: ".td-header-links__panel",
+      $: "Panel",
       position: "fixed",
       inset: "0.5rem $docs-nav-pad-x auto auto",
       inlineSize: "min(20rem, calc(100vw - 2 * $docs-nav-pad-x))",
@@ -99,17 +99,17 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
       },
     },
     OpenPanel: {
-      $: ".td-header-links__panel",
-      opacity: { "": null, "@own(@popover-open & [data-open])": "1" },
-      scale: { "": null, "@own(@popover-open & [data-open])": "1" },
+      $: "[data-element=Panel]",
+      opacity: { "": null, "@own(:is(:popover-open) & [data-open])": "1" },
+      scale: { "": null, "@own(:is(:popover-open) & [data-open])": "1" },
     },
     PanelNavigation: {
-      $: ".td-header-links__panel nav",
+      $: "Panel nav",
       display: "grid",
       gap: "1bw",
     },
     PanelLink: {
-      $: ".td-header-links__panel a",
+      $: "Panel a",
       justifyContent: "flex-start",
       blockSize: "min $docs-menu-button-size",
       inlinePadding: "($gap * 1.5)",
@@ -119,15 +119,15 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
       overflowWrap: "anywhere",
     },
     FirstPanelLink: {
-      $: ".td-header-links__panel a",
+      $: "Panel a",
       inlinePadding: {
         "": null,
-        "@own(:is(.td-header-links__panel a:first-child))":
+        "@own(:first-child)":
           "($gap * 1.5) start, ($docs-menu-button-size + $gap) end",
       },
     },
     Close: {
-      $: ".td-header-links__close",
+      $: "Close",
       position: "absolute",
       inset: "$gap $gap auto auto",
       display: "grid",
@@ -141,7 +141,7 @@ export const HeaderLinksRoot = defineComponent("HeaderLinks", {
       radius: "$header-control-radius",
     },
     HoverClose: {
-      $: ".td-header-links__close",
+      $: "[data-element=Close]",
       color: { "": null, "@own(:hover)": "#text" },
       fill: { "": null, "@own(:hover)": "#surface-2-hover" },
     },

package/dist/components/Hero.styles.js

@@ -10,17 +10,17 @@ export const HeroRoot = defineComponent("Hero", {
     display: "grid",
     gridColumns: {
       "": "minmax(0, 7fr) minmax(12rem, 4fr)",
-      "@mobile": "minmax(0, 1fr)",
+      "!@md": "minmax(0, 1fr)",
     },
     alignItems: "center",
     gap: "clamp(2rem, 5vw, 5rem)",
     blockPadding: {
       "": "clamp(3rem, 8vw, 7rem) start, clamp(2rem, 6vw, 5rem) end",
-      "@mobile": "($gap * 4) start, clamp(2rem, 6vw, 5rem) end",
+      "!@md": "($gap * 4) start, clamp(2rem, 6vw, 5rem) end",
     },
     Visual: {
-      $: "> img, > .hero-html",
-      order: { "": "2", "@mobile": "0" },
+      $: "> img, > Visual",
+      order: { "": "2", "!@md": "0" },
       display: "grid",
       placeItems: "center",
       inlineSize: "min(100%, 22rem)",
@@ -46,15 +46,15 @@ export const HeroRoot = defineComponent("Hero", {
       },
     },
     Stack: {
-      $: "> :is(.stack)",
+      $: "> Stack",
       display: "flex",
       flow: "column",
-      alignItems: { "": "flex-start", "@mobile": "center" },
+      alignItems: { "": "flex-start", "!@md": "center" },
       gap: "clamp(1.5rem, 3vw, 2rem)",
-      textAlign: { "": "start", "@mobile": "center" },
+      textAlign: { "": "start", "!@md": "center" },
     },
     Copy: {
-      $: "> :is(.stack) > :is(.copy)",
+      $: "> Stack > Copy",
       display: "flex",
       flow: "column",
       alignItems: "inherit",
@@ -69,62 +69,60 @@ export const HeroRoot = defineComponent("Hero", {
       textWrap: "balance",
     },
     Tagline: {
-      $: ":is(.tagline)",
+      $: "Tagline",
       inlineSize: "max 48ch",
       color: "#text-soft",
       preset: "hero-tagline",
       textWrap: "balance",
     },
     Actions: {
-      $: ":is(.actions)",
+      $: "Actions",
       display: "flex",
       flow: "row wrap",
-      justifyContent: { "": "flex-start", "@mobile": "center" },
+      justifyContent: { "": "flex-start", "!@md": "center" },
       gap: "($gap * 1.5)",
     },
     Action: {
-      $: ".cookbook-link-button",
+      $: "Action",
       display: "inline-flex",
       alignItems: "center",
       blockSize: "min $control-height",
       padding: "($gap * 1.25) ($gap * 2.5)",
       gap: "$gap",
       color: "#text",
-      border: true,
+      border: { "": true, "@own(minimal)": "#clear" },
       radius: "round",
       fill: "#surface-2",
       preset: "navigation / strong",
       textDecoration: "none",
-      transition: "fill $transition, translate $transition",
+      transition: "fill $transition",
     },
     HoverAction: {
-      $: ".cookbook-link-button",
-      "$hover-offset": "-1px",
+      $: "[data-element=Action]",
       fill: { "": null, "@own(:hover)": "#surface-2-hover" },
-      translate: { "": null, "@own(:hover)": "0 $hover-offset" },
     },
     PrimaryAction: {
-      $: ".cookbook-link-button.primary",
-      color: "#accent-surface-text",
+      $: "[data-element=Action]",
+      color: { "": null, "@own(primary)": "#accent-surface-text" },
       // Recolor only; Action owns the border width and style, including theme overrides.
       // eslint-disable-next-line tasty/prefer-shorthand-property
-      borderColor: "#accent-surface",
-      fill: "#accent-surface",
+      borderColor: { "": null, "@own(primary)": "#accent-surface" },
+      fill: { "": null, "@own(primary)": "#accent-surface" },
     },
     SecondaryAction: {
-      $: ".cookbook-link-button.secondary",
-      color: "#accent-text",
+      $: "[data-element=Action]",
+      color: { "": null, "@own(secondary)": "#accent-text" },
       // Recolor only; Action owns the border width and style, including theme overrides.
       // eslint-disable-next-line tasty/prefer-shorthand-property
-      borderColor: "#border-strong",
+      borderColor: { "": null, "@own(secondary)": "#border-strong" },
     },
     MinimalAction: {
-      $: ".cookbook-link-button.minimal",
-      inlinePadding: "0",
-      color: "#accent-text",
-      border: "0",
-      fill: "#clear",
+      $: "[data-element=Action]",
+      color: { "": null, "@own(minimal)": "#accent-text" },
+      // Recolor only so theme.styles.Hero.Action can still own border geometry.
+      // eslint-disable-next-line tasty/prefer-shorthand-property
+      borderColor: { "": null, "@own(minimal)": "#clear" },
     },
-    ActionIcon: { $: ".cookbook-link-button svg", flexShrink: "0" },
+    ActionIcon: { $: "Action svg", flexShrink: "0" },
   },
 });

package/dist/components/Icon.astro

@@ -10,9 +10,9 @@ import check from "../icons/check.svg?raw";
 
 interface Props {
   name: string;
-  class?: string;
+  "data-element"?: "Icon" | "LabelIcon" | "Caret" | "Checkmark";
 }
-const { name, class: className } = Astro.props;
+const { name, "data-element": element = "Icon" } = Astro.props;
 const originals: Record<string, string> = {
   bars: menu,
   close,
@@ -32,7 +32,7 @@ const originals: Record<string, string> = {
 };
 const svg = originals[name]
   ?.replaceAll('stroke="black"', 'stroke="currentColor"')
-  .replace("<svg ", `<svg class="${className ?? ""}" aria-hidden="true" `);
+  .replace("<svg ", `<svg data-element="${element}" aria-hidden="true" `);
 if (!svg) throw new Error(`Unknown Cookbook icon: ${name}`);
 ---
 

package/dist/components/LanguageSelect.styles.js

@@ -37,11 +37,11 @@ export const LanguageSelectRoot = defineComponent("LanguageSelect", {
       fill: { "": null, "@own(:active)": "#surface-2-pressed" },
     },
     LabelIcon: {
-      $: "> button > .label-icon",
+      $: "> button > LabelIcon",
       display: "block",
       flexShrink: "0",
-      inlineSize: { "": "1.25rem", "@mobile": "1.125rem" },
-      blockSize: { "": "1.25rem", "@mobile": "1.125rem" },
+      inlineSize: { "": "1.25rem", "!@md": "1.125rem" },
+      blockSize: { "": "1.25rem", "!@md": "1.125rem" },
     },
     TriggerLabel: {
       // Reuse the shared, server-only popover anatomy.
@@ -60,11 +60,11 @@ export const LanguageSelectRoot = defineComponent("LanguageSelect", {
       padding: { "": null, "[data-compact]": "0" },
     },
     CompactLabel: {
-      $: "& > button > .trigger-label",
+      $: "& > button > [data-element=TriggerLabel]",
       hide: { "": null, "[data-compact]": true },
     },
     CompactCaret: {
-      $: "& > button > :is(.caret)",
+      $: "& > button > :is(Caret)",
       hide: { "": null, "[data-compact]": true },
     },
     Label: { $: "> button" },
@@ -82,7 +82,7 @@ export const LanguageSelectRoot = defineComponent("LanguageSelect", {
     CompactLabelIcon: {
       // Preserve the conditional scope of this empty legacy customization hook.
       // eslint-disable-next-line tasty/no-state-in-selector
-      $: "&[data-compact] > button > .label-icon",
+      $: "&[data-compact] > button > [data-element=LabelIcon]",
     },
     SidebarTrigger: {
       $: "& > button",
@@ -92,7 +92,7 @@ export const LanguageSelectRoot = defineComponent("LanguageSelect", {
       // Reuse the shared, server-only popover anatomy.
       // eslint-disable-next-line tasty/no-style-spread
       ...languageSelectStyles.Panel,
-      blockInset: { "": "4rem start", "@mobile": "3.5rem start" },
+      blockInset: { "": "4rem start", "!@md": "3.5rem start" },
       inlineInset:
         "max($docs-nav-pad-x, ((100vw - $layout-width) / 2 + $docs-sidebar-pad-x)) end",
     },
@@ -154,7 +154,7 @@ export const LanguageSelectRoot = defineComponent("LanguageSelect", {
       // eslint-disable-next-line tasty/no-style-spread
       ...languageSelectStyles.CurrentOption,
     },
-    Fallback: { $: ".fallback-label", color: "#text-muted" },
+    Fallback: { $: "Fallback", color: "#text-muted" },
     Checkmark: {
       // Reuse the shared, server-only popover anatomy.
       // eslint-disable-next-line tasty/no-style-spread

package/dist/components/MainContent.styles.js

@@ -12,17 +12,17 @@ export const MainContentRoot = defineComponent("MainContent", {
     padding: "0 0 5rem",
     // Layout spacing is a default; generated Markdown owns prose spacing.
     ContentSpacing: {
-      $: ":where(.content-panel > .cookbook-container) > * + *",
+      $: ":where(Panel > Container) > * + *",
       blockMargin: "$margin-block-start $margin-block-end",
       "$margin-block-start": "($gap * 3)",
     },
     Container: {
-      $: ".content-panel > .cookbook-container",
+      $: "Panel > Container",
       inlineMargin: "auto",
       inlineSize: "max $content-width",
     },
     Panel: {
-      $: ".content-panel",
+      $: "Panel",
       "$padding-block-start": {
         "": "($gap * 3)",
         "@own(:nth-of-type(2))": "($gap * 2)",

package/dist/components/MainPane.styles.js

@@ -13,7 +13,7 @@ export const MainPaneRoot = defineComponent("MainPane", {
       "": "0 100% initial",
       "[data-has-sidebar] & [data-has-toc]":
         "min(calc(100% - $sidebar-width), calc($content-width + (100% - $content-width - $sidebar-width) / 2))",
-      "([data-has-sidebar] & [data-has-toc]) & (@narrow-layout)": "100%",
+      "([data-has-sidebar] & [data-has-toc]) & (!@lg)": "100%",
     },
   },
 });

package/dist/components/MarkdownAlert.styles.js

@@ -11,28 +11,28 @@ export function MarkdownAlertStyles() {
       padding: "($gap * 2) ($gap * 2.5)",
       color: {
         "": "#text-soft",
-        ".cookbook-alert--note": "#blue-text",
-        ".cookbook-alert--tip": "#green-text",
-        ".cookbook-alert--caution": "#warning-text",
-        ".cookbook-alert--danger": "#red-text",
+        "[data-note]": "#blue-text",
+        "[data-tip]": "#green-text",
+        "[data-caution]": "#warning-text",
+        "[data-danger]": "#red-text",
       },
       border: {
         "": true,
-        ".cookbook-alert--note": "#blue",
-        ".cookbook-alert--tip": "#green",
-        ".cookbook-alert--caution": "#warning",
-        ".cookbook-alert--danger": "#red",
+        "[data-note]": "#blue",
+        "[data-tip]": "#green",
+        "[data-caution]": "#warning",
+        "[data-danger]": "#red",
       },
       radius: "$card-radius",
       fill: {
         "": "#surface-2",
-        ".cookbook-alert--note": "#blue-surface",
-        ".cookbook-alert--tip": "#green-surface",
-        ".cookbook-alert--caution": "#warning-surface",
-        ".cookbook-alert--danger": "#red-surface",
+        "[data-note]": "#blue-surface",
+        "[data-tip]": "#green-surface",
+        "[data-caution]": "#warning-surface",
+        "[data-danger]": "#red-surface",
       },
       Title: {
-        $: ".cookbook-alert__title",
+        $: "Title",
         display: "flex",
         alignItems: "center",
         gap: "$gap",
@@ -44,15 +44,14 @@ export function MarkdownAlertStyles() {
         preset: "strong",
       },
       FirstContent: {
-        $: ".cookbook-alert__content > *",
+        $: "Content > *",
         blockMargin: {
           "": null,
-          "@own(:is(.cookbook-alert__content > :first-child))":
-            "$margin-block-start $margin-block-end",
+          "@own(:first-child)": "$margin-block-start $margin-block-end",
         },
         "$margin-block-start": {
           "": null,
-          "@own(:is(.cookbook-alert__content > :first-child))": "0",
+          "@own(:first-child)": "0",
         },
       },
     }),

package/dist/components/MarkdownCodeBlock.styles.js

@@ -9,7 +9,7 @@ configureCookbookStates();
 
 export function MarkdownCodeBlockStyles() {
   useGlobalStyles(
-    ':is(.cookbook-markdown-content .td-code-block, .td-code-block[data-element="MarkdownCodeBlock"])',
+    ".td-code-block.td-code-block",
     resolveComponentStyles("MarkdownCodeBlock", {
       "$copy-button-size": "2rem",
       display: "block",
@@ -67,13 +67,13 @@ export function MarkdownCodeBlockStyles() {
         $: '> [data-element="CopyButton"]',
         color: {
           "": null,
-          '@own([data-copy-state="copied"])': "#green-text",
+          "copy-state=copied": "#green-text",
         },
         // Recolor only; CopyButton owns the border width and style, including theme overrides.
         // eslint-disable-next-line tasty/prefer-shorthand-property
         borderColor: {
           "": null,
-          '@own([data-copy-state="copied"])': "#green",
+          "copy-state=copied": "#green",
         },
       },
       CopyIcon: {
@@ -92,38 +92,50 @@ export function MarkdownCodeBlockStyles() {
           "": null,
           // SVG encoding runs only during the server build.
           // eslint-disable-next-line tasty/no-runtime-styles-mutation
-          '@own(:is([data-element="CopyButton"][data-copy-state="copied"] > [data-element="CopyIcon"]))': `url("${svgIconUrl(checkIcon)}") center / contain no-repeat`,
+          "copy-state=copied": `url("${svgIconUrl(checkIcon)}") center / contain no-repeat`,
         },
       },
       Code: { $: "pre code", padding: "0", color: "inherit", fill: "#clear" },
-      Diff: { $: "pre.td-diff", inlinePadding: "0" },
+      Diff: { $: "pre", inlinePadding: { "": null, diff: "0" } },
       DiffCode: {
-        $: "pre.td-diff code",
-        display: "block",
-        inlineSize: "100% max-content initial",
+        $: "pre code",
+        display: { "": null, diff: "block" },
+        inlineSize: {
+          "": null,
+          diff: "100% max-content initial",
+        },
         // Zero line height removes gaps between block diff lines; the tight modifier would not.
         // eslint-disable-next-line tasty/prefer-shorthand-property
-        lineHeight: "0",
+        lineHeight: { "": null, diff: "0" },
       },
       DiffLine: {
-        $: "pre.td-diff > code > :is(.line)",
-        display: "block",
-        inlinePadding: "1rem",
-        preset: "code",
+        $: "pre > code > [data-element=Line]",
+        display: { "": null, diff: "block" },
+        inlinePadding: {
+          "": null,
+          diff: "1rem",
+        },
+        preset: { "": null, diff: "code" },
       },
       EmptyDiffLine: {
         // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
         // eslint-disable-next-line tasty/no-state-in-selector
-        $: "pre.td-diff > code > .line:empty::before",
-        content: '"\\200b"',
+        $: "pre > code > Line:empty::before",
+        content: { "": null, diff: '"\\200b"' },
       },
       InsertedLine: {
-        $: "pre.td-diff > code > .td-diff-line--inserted",
-        fill: "#green-surface",
+        $: "pre > code > [data-element=Line]",
+        fill: {
+          "": null,
+          "diff & @own(inserted)": "#green-surface",
+        },
       },
       DeletedLine: {
-        $: "pre.td-diff > code > .td-diff-line--deleted",
-        fill: "#red-surface",
+        $: "pre > code > [data-element=Line]",
+        fill: {
+          "": null,
+          "diff & @own(deleted)": "#red-surface",
+        },
       },
     }),
   );