@tenphi/renderer 0.22.1 → 0.24.0

package/dist/components/MarkdownContent.styles.js

@@ -15,134 +15,100 @@ import { configureCookbookStates } from "./tasty-states.js";
 configureCookbookStates();
 
 export default function MarkdownStyles() {
-  // Match component-root specificity so prose owns spacing inside Markdown.
+  // Prose must outrank component roots (two generated class selectors) so it
+  // owns block spacing without targeting the containing element in a $ selector.
   useGlobalStyles(
-    ".cookbook-markdown-content.cookbook-markdown-content",
+    ".cookbook-markdown-content.cookbook-markdown-content.cookbook-markdown-content",
     resolveComponentStyles("Markdown", {
       preset: "prose",
       Block: {
         $: ":where(p), :where(ul), :where(ol), :where(dl), :where(blockquote), :where(pre), :where(table), :where(hr), :where(details)",
-        "$margin-block-start": { "": null, "@own(!:is(.not-content *))": "0" },
-        "$margin-block-end": { "": null, "@own(!:is(.not-content *))": "0" },
+        "$margin-block-start": { "": null, "@prose": "0" },
+        "$margin-block-end": { "": null, "@prose": "0" },
         blockMargin: {
           "": null,
-          "@own(!:is(.not-content *))": "$margin-block-start $margin-block-end",
+          "@prose": "$margin-block-start $margin-block-end",
         },
       },
       // Linked Cards are block content even though their root is an anchor.
       BlockSpacing: {
         // Prose spacing must win over each block component's root margin.
-        $: "&.cookbook-markdown-content * + *",
+        $: "* + *",
         blockMargin: {
           "": null,
-          "(@own(:is(:not(a,strong,em,del,span,input,code,br) + *)) | @own(:is(a.td-card + *))) & (@own(!:is(a,strong,em,del,span,input,code,br,li,dt,dd,.not-content *)) | @own(:is(a.td-card)))":
-            "$margin-block-start $margin-block-end",
-        },
-        "$margin-block-start": {
-          "": null,
-          "(@own(:is(:not(a,strong,em,del,span,input,code,br) + *)) | @own(:is(a.td-card + *))) & (@own(!:is(a,strong,em,del,span,input,code,br,li,dt,dd,.not-content *)) | @own(:is(a.td-card)))":
-            "($gap * 3)",
+          "@prose-block": "$margin-block-start $margin-block-end",
         },
+        "$margin-block-start": { "": null, "@prose-block": "($gap * 3)" },
       },
       HeadingSpacing: {
-        $: "* + h1, * + h2, * + h3, * + h4, * + h5, * + h6, * + .cookbook-heading-wrapper",
-        "$margin-block-start": {
-          "": null,
-          "@own(:is(:not(h1,h2,h3,h4,h5,h6,.cookbook-heading-wrapper) + *)) & @own(!:is(.not-content *))":
-            "1.5em",
-        },
-        "$margin-block-end": {
-          "": null,
-          "@own(:is(:not(h1,h2,h3,h4,h5,h6,.cookbook-heading-wrapper) + *)) & @own(!:is(.not-content *))":
-            "0",
-        },
+        $: "* + h1, * + h2, * + h3, * + h4, * + h5, * + h6, * + [data-element=MarkdownHeading]",
+        "$margin-block-start": { "": null, "@prose-heading": "1.5em" },
+        "$margin-block-end": { "": null, "@prose-heading": "0" },
         blockMargin: {
           "": null,
-          "@own(:is(:not(h1,h2,h3,h4,h5,h6,.cookbook-heading-wrapper) + *)) & @own(!:is(.not-content *))":
-            "$margin-block-start $margin-block-end",
+          "@prose-heading": "$margin-block-start $margin-block-end",
         },
       },
       List: {
         $: ":where(ul), :where(ol)",
-        inlinePadding: {
-          "": null,
-          "@own(!:is(.not-content *))": "1.5rem start",
-        },
+        inlinePadding: { "": null, "@prose": "1.5rem start" },
       },
       CompactItem: {
         $: ":where(li + li), :where(dt + dt), :where(dt + dd), :where(dd + dd)",
-        "$margin-block-start": {
-          "": null,
-          "@own(!:is(.not-content *))": "($gap * 0.5)",
-        },
-        "$margin-block-end": { "": null, "@own(!:is(.not-content *))": "0" },
+        "$margin-block-start": { "": null, "@prose": "($gap * 0.5)" },
+        "$margin-block-end": { "": null, "@prose": "0" },
         blockMargin: {
           "": null,
-          "@own(!:is(.not-content *))": "$margin-block-start $margin-block-end",
+          "@prose": "$margin-block-start $margin-block-end",
         },
       },
       ListItem: {
         $: "li",
-        overflowWrap: { "": null, "@own(!:is(.not-content *))": "anywhere" },
+        overflowWrap: { "": null, "@prose": "anywhere" },
       },
       DefinitionTerm: {
         $: "dt",
-        preset: { "": null, "@own(!:is(.not-content *))": "strong" },
+        preset: { "": null, "@prose": "strong" },
       },
       DefinitionDescription: {
         $: "dd",
-        inlinePadding: {
-          "": null,
-          "@own(!:is(.not-content *))": "($gap * 2) start",
-        },
+        inlinePadding: { "": null, "@prose": "($gap * 2) start" },
       },
       Link: {
-        $: "a",
-        color: { "": null, "@own(!:is(.not-content *))": "#accent-text" },
-        textUnderlineOffset: {
-          "": null,
-          "@own(!:is(.not-content *))": "0.15em",
-        },
+        // Keep ordinary prose links at their former weight so heading controls own color.
+        $: ":where(a)",
+        color: { "": null, "@prose": "#accent-text" },
+        textUnderlineOffset: { "": null, "@prose": "0.15em" },
       },
       HoverLink: {
-        $: "a",
+        $: ":where(a)",
         color: {
           "": null,
-          "@own(:hover) & @own(!:is(.not-content *))": "#text",
+          "@own(:hover) & @prose": "#text",
         },
       },
       Quote: {
         $: "blockquote",
-        inlinePadding: { "": null, "@own(!:is(.not-content *))": "2x start" },
-        color: { "": null, "@own(!:is(.not-content *))": "#text-soft" },
-        inlineBorder: {
-          "": null,
-          "@own(!:is(.not-content *))": "1bw solid #border start",
-        },
+        inlinePadding: { "": null, "@prose": "2x start" },
+        color: { "": null, "@prose": "#text-soft" },
+        inlineBorder: { "": null, "@prose": "1bw solid #border start" },
       },
       Rule: {
         $: "hr",
-        border: { "": null, "@own(!:is(.not-content *))": "0" },
-        blockBorder: {
-          "": null,
-          "@own(!:is(.not-content *))": "$border-width solid #border end",
-        },
+        border: { "": null, "@prose": "0" },
+        blockBorder: { "": null, "@prose": "$border-width solid #border end" },
       },
       Details: {
         $: "details",
         "$details-border-width": "2px",
-        inlinePadding: {
-          "": null,
-          "@own(!:is(.not-content *))": "($gap * 2) start",
-        },
+        inlinePadding: { "": null, "@prose": "($gap * 2) start" },
         inlineBorder: {
           "": null,
-          "@own(!:is(.not-content *))":
-            "$details-border-width solid #border start",
+          "@prose": "$details-border-width solid #border start",
         },
         // Change only color; border widths and styles belong to other rules or theme overrides.
         // eslint-disable-next-line tasty/prefer-shorthand-property
-        borderColor: { "": null, "@own(!:is(.not-content *))": "#border" },
+        borderColor: { "": null, "@prose": "#border" },
       },
       HoverDetails: {
         $: "details",
@@ -150,52 +116,44 @@ export default function MarkdownStyles() {
         // eslint-disable-next-line tasty/prefer-shorthand-property
         borderColor: {
           "": null,
-          "(@own(![open] & :hover) | @own(:has(> summary:hover))) & @own(!:is(.not-content *))":
+          "(@own(![open] & :hover) | @own(:has(> summary:hover))) & @prose":
             "#accent-text",
         },
       },
       Summary: {
         $: "summary",
-        display: { "": "", "@own(!:is(.not-content *))": "block" },
-        inlineMargin: {
-          "": null,
-          "@own(!:is(.not-content *))": "-0.5rem start",
-        },
-        inlinePadding: {
-          "": null,
-          "@own(!:is(.not-content *))": "0.5rem start",
-        },
-        color: { "": null, "@own(!:is(.not-content *))": "#text" },
-        preset: { "": null, "@own(!:is(.not-content *))": "strong" },
+        display: { "": "", "@prose": "block" },
+        inlineMargin: { "": null, "@prose": "-0.5rem start" },
+        inlinePadding: { "": null, "@prose": "0.5rem start" },
+        color: { "": null, "@prose": "#text" },
+        preset: { "": null, "@prose": "strong" },
       },
       OpenSummary: {
         $: "details > summary",
         "$margin-block-start": {
           "": null,
-          "@own(:is(details[open] > summary)) & @own(!:is(.not-content *))":
-            "0",
+          "@own(:is([open] >)) & @prose": "0",
         },
         "$margin-block-end": {
           "": null,
-          "@own(:is(details[open] > summary)) & @own(!:is(.not-content *))":
-            "($gap * 2)",
+          "@own(:is([open] >)) & @prose": "($gap * 2)",
         },
         blockMargin: {
           "": null,
-          "@own(:is(details[open] > summary)) & @own(!:is(.not-content *))":
+          "@own(:is([open] >)) & @prose":
             "$margin-block-start $margin-block-end",
         },
       },
       SummaryMarker: {
         // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
         // eslint-disable-next-line tasty/no-state-in-selector
-        $: "summary:not(.not-content *)::marker, summary:not(.not-content *)::-webkit-details-marker",
+        $: "summary:not([data-not-content] *)::marker, summary:not([data-not-content] *)::-webkit-details-marker",
         hide: true,
       },
       SummaryIcon: {
         // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
         // eslint-disable-next-line tasty/no-state-in-selector
-        $: "summary:not(.not-content *)::before",
+        $: "summary:not([data-not-content] *)::before",
         content: '""',
         display: "inline-block",
         inlineSize: "1.25rem",
@@ -211,12 +169,12 @@ export default function MarkdownStyles() {
       OpenSummaryIcon: {
         // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
         // eslint-disable-next-line tasty/no-state-in-selector
-        $: "details[open] > summary:not(.not-content *)::before",
+        $: "details[open] > summary:not([data-not-content] *)::before",
         rotate: "90deg",
       },
       Code: {
         $: ":where(code)",
-        radius: { "": null, "@own(!:is(.not-content *))": "($radius * 0.65)" },
+        radius: { "": null, "@prose": "($radius * 0.65)" },
       },
     }),
   );

package/dist/components/MarkdownHeading.styles.js

@@ -14,12 +14,12 @@ export function MarkdownHeadingStyles() {
       color: "#heading",
       preset: {
         "": "heading",
-        ".level-h1": "h1",
-        ".level-h2": "h2",
-        ".level-h3": "h3",
-        ".level-h4": "h4",
-        ".level-h5": "h5",
-        ".level-h6": "h6",
+        "level=h1": "h1",
+        "level=h2": "h2",
+        "level=h3": "h3",
+        "level=h4": "h4",
+        "level=h5": "h5",
+        "level=h6": "h6",
       },
       Heading: {
         $: "> *",
@@ -28,28 +28,28 @@ export function MarkdownHeadingStyles() {
         inlinePadding: {
           "": null,
           "@own(:first-child)": "0 end",
-          "(@own(:first-child)) & (@mobile)": "1.75rem end",
+          "(@own(:first-child)) & (!@md)": "1.75rem end",
         },
       },
       Link: {
-        $: "> .cookbook-anchor-link",
-        position: { "": "absolute", "@mobile": "relative" },
+        $: "> [data-element=Anchor]",
+        position: { "": "absolute", "!@md": "relative" },
         blockInset: {
           "": "((1lh - 1.75rem) / 2) start",
-          "@mobile": "auto start",
+          "!@md": "auto start",
         },
-        inlineInset: { "": "-2rem start", "@mobile": "auto start" },
+        inlineInset: { "": "-2rem start", "!@md": "auto start" },
         display: "inline-grid",
         placeItems: "center",
-        inlineSize: { "": "1.75rem", "@mobile": "1.5rem" },
-        blockSize: { "": "1.75rem", "@mobile": "1.5rem" },
-        inlineMargin: { "": "0 start", "@mobile": "-1.5rem start" },
-        verticalAlign: { "": "baseline", "@mobile": "middle" },
+        inlineSize: { "": "1.75rem", "!@md": "1.5rem" },
+        blockSize: { "": "1.75rem", "!@md": "1.5rem" },
+        inlineMargin: { "": "0 start", "!@md": "-1.5rem start" },
+        verticalAlign: { "": "baseline", "!@md": "middle" },
         color: "#text-muted",
         opacity: {
           "": "1",
           "@media(hover: hover)": "0",
-          "@mobile": "1",
+          "!@md": "1",
         },
         radius: "$radius",
         userSelect: "none",
@@ -57,14 +57,14 @@ export function MarkdownHeadingStyles() {
         transition: "color $transition, fill $transition, opacity $transition",
       },
       RevealedLink: {
-        $: "> .cookbook-anchor-link",
+        $: "> [data-element=Anchor]",
         opacity: {
           "": null,
           ":hover | @own(:focus-visible)": "1",
         },
       },
       HoverLink: {
-        $: "> .cookbook-anchor-link",
+        $: "> [data-element=Anchor]",
         color: {
           "": null,
           "@own(:hover | :focus-visible)": "#accent-text",
@@ -75,7 +75,7 @@ export function MarkdownHeadingStyles() {
         },
       },
       LinkIcon: {
-        $: "> .cookbook-anchor-link > .cookbook-anchor-icon",
+        $: "> Anchor > [data-element=AnchorIcon]",
         display: "block",
         preset: "inherit / tight",
         // Scale with the current heading without replacing its inherited typography.
@@ -86,22 +86,21 @@ export function MarkdownHeadingStyles() {
         blockSize: "1em",
       },
       CopiedLink: {
-        $: "> .cookbook-anchor-link",
+        $: "> [data-element=Anchor]",
         color: { "": null, '@own([data-copy-state="copied"])': "#green-text" },
         opacity: { "": null, '@own([data-copy-state="copied"])': "1" },
       },
       CopiedLinkIcon: {
-        $: "> .cookbook-anchor-link > .cookbook-anchor-icon",
+        $: "> Anchor > [data-element=AnchorIcon]",
         visibility: {
           "": null,
-          '@own(:is(.cookbook-anchor-link[data-copy-state="copied"] > .cookbook-anchor-icon))':
-            "hidden",
+          '@own(:is([data-copy-state="copied"] >))': "hidden",
         },
       },
       CopiedIcon: {
         // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
         // eslint-disable-next-line tasty/no-state-in-selector
-        $: '> .cookbook-anchor-link[data-copy-state="copied"]::after',
+        $: '> Anchor[data-copy-state="copied"]::after',
         content: '""',
         position: "absolute",
         inlineSize: "clamp(1rem, 0.65em, 1.5rem)",

package/dist/components/MarkdownInlineCode.styles.js

@@ -6,7 +6,7 @@ configureCookbookStates();
 
 export function MarkdownInlineCodeStyles() {
   useGlobalStyles(
-    ".cookbook-markdown-content code:not(:where(pre *, .not-content *))",
+    ".cookbook-markdown-content code:not(:where(pre *, [data-not-content] *))",
     resolveComponentStyles("MarkdownInlineCode", {
       padding: "0.125rem 0.375rem",
       color: "#text-soft",

package/dist/components/MarkdownTable.styles.js

@@ -30,7 +30,7 @@ export function MarkdownTableStyles() {
         $: "tbody td",
         // Clear only the last row's end border; the theme may configure its start border.
         // eslint-disable-next-line tasty/prefer-shorthand-property
-        borderBlockEnd: { "@own(:is(tbody tr:last-child > td))": "0" },
+        borderBlockEnd: { "@own(:is(tr:last-child >))": "0" },
       },
       HeaderCell: {
         $: "th",
@@ -38,16 +38,16 @@ export function MarkdownTableStyles() {
         fill: "#surface-2",
         textAlign: "start",
         radius: {
-          "@own(:is(thead:first-child tr:first-child > th) & :first-child & !:last-child)":
+          "@own(:is(thead:first-child tr:first-child >) & :first-child & !:last-child)":
             "($card-radius - $border-width) top-left",
-          "@own(:is(thead:first-child tr:first-child > th) & !:first-child & :last-child)":
+          "@own(:is(thead:first-child tr:first-child >) & !:first-child & :last-child)":
             "($card-radius - $border-width) top-right",
-          "@own(:is(thead:first-child tr:first-child > th) & :first-child & :last-child)":
+          "@own(:is(thead:first-child tr:first-child >) & :first-child & :last-child)":
             "($card-radius - $border-width) top",
         },
       },
       Scroll: {
-        $: ".td-table-scroll",
+        $: "Scroll",
         inlineSize: "initial 100% 100%",
         overflow: "auto",
         scrollbar: "thin",

package/dist/components/Mermaid.styles.js

@@ -43,7 +43,10 @@ export function MermaidStyles() {
         margin: "auto",
       },
       Text: { $: "text", font: "$body-font-family" },
-      MonoText: { $: ":is(.mono)", font: "$code-font-family" },
+      MonoText: {
+        $: "text",
+        font: { "": null, "@own(mono)": "$code-font-family" },
+      },
     }),
   );
   return null;

package/dist/components/MermaidSource.styles.js

@@ -6,7 +6,7 @@ configureCookbookStates();
 
 export function MermaidSourceStyles() {
   useGlobalStyles(
-    '.cookbook-markdown-content pre[data-language="mermaid"]:not(.not-content *)',
+    '.cookbook-markdown-content pre[data-language="mermaid"]:not([data-not-content] *)',
     resolveComponentStyles("MermaidSource", {
       padding: "0.875rem 1rem",
       overflowX: "auto",

package/dist/components/MobileMenuFooter.styles.js

@@ -15,7 +15,7 @@ export const MobileMenuFooterRoot = defineComponent("MobileMenuFooter", {
     blockPadding: "$gap",
     blockBorder: "$border-width solid #border start",
     Social: {
-      $: ".td-mobile-preferences__social",
+      $: "Social",
       display: "flex",
       hide: { "": false, ":empty": true },
       alignItems: "center",

package/dist/components/MobileMenuToggle.styles.js

@@ -11,7 +11,7 @@ export const MobileMenuToggleRoot = extendComponent(
     "data-element": "MobileMenuToggle",
     styles: {
       color: { ":hover": "#text", ":active": "#accent-text" },
-      display: { "": "none", "@mobile": "flex" },
+      display: { "": "none", "!@md": "flex" },
       inlineSize: "(100% + ($docs-nav-pad-x * 2))",
       inlineMargin: "(-1 * $docs-nav-pad-x)",
       blockSize: "0 3rem initial",
@@ -30,14 +30,14 @@ export const MobileMenuToggleRoot = extendComponent(
         blockSize: "1.125rem",
       },
       Section: {
-        $: ".td-menu-button__section",
+        $: "Section",
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
         inlineSize: "max 40%",
       },
       Page: {
-        $: ".td-menu-button__page",
+        $: "Page",
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",

package/dist/components/MobileNavigationTabs.astro

@@ -43,12 +43,13 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 {
   layout.tabs.length > 0 && (
     <MobileNavigationTabsRoot
-      className="td-mobile-tabs cookbook-print-hidden"
+      className="td-mobile-tabs"
+      data-print-hidden=""
       aria-label={ui.sections}
     >
       <details>
         <summary aria-label={ui.chooseSection}>
-          <span class="td-mobile-tabs__label">
+          <span data-element="Label">
             {layout.tabs[activeTab]?.label ?? ui.sections}
           </span>
           <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">

package/dist/components/MobileNavigationTabs.styles.js

@@ -10,11 +10,11 @@ export const MobileNavigationTabsRoot = defineComponent(
     "data-element": "MobileNavigationTabs",
     styles: {
       display: "grid",
-      hide: { "": false, "@desktop": true },
+      hide: { "": false, "@md": true },
       gap: "$gap",
       blockMargin: "0",
       Label: {
-        $: ".td-mobile-tabs__label",
+        $: "Label",
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
@@ -43,7 +43,7 @@ export const MobileNavigationTabsRoot = defineComponent(
         $: "details > summary > svg",
         rotate: {
           "": null,
-          "@own(:is(details[open] > summary > svg))": "180deg",
+          "@own(:is([open] > summary >))": "180deg",
         },
       },
       List: {

package/dist/components/MobileTableOfContents.styles.js

@@ -10,7 +10,7 @@ export const MobileTableOfContentsRoot = defineComponent(
     "data-element": "MobileTableOfContents",
     styles: {
       display: "block",
-      hide: { "": true, "@narrow-layout": false },
+      hide: { "": true, "!@lg": false },
       padding: "$gap $docs-sidebar-pad-x",
       blockBorder: "$border-width solid #border end",
       fill: "#surface",
@@ -51,7 +51,7 @@ export const MobileTableOfContentsRoot = defineComponent(
         $: "a, summary",
         outline: {
           "": null,
-          "@own(:is(a:focus-visible)) | @own(:is(summary:focus-visible))":
+          "@own(:focus-visible)":
             "$outline-width solid #focus / $outline-offset",
         },
       },

package/dist/components/PackageVersion.styles.js

@@ -8,7 +8,7 @@ export const PackageVersionRoot = defineComponent("PackageVersion", {
   "data-element": "PackageVersion",
   styles: {
     display: "inline-flex",
-    hide: { "": false, "@compact": true },
+    hide: { "": false, "@media(w <= 23rem)": true },
     alignItems: "center",
     flexShrink: "0",
     blockSize: "min 1.5rem",

package/dist/components/PageFrame.styles.js

@@ -11,23 +11,23 @@ export const PageFrameRoot = defineComponent("PageFrame", {
     flow: "column",
     blockSize: "min 100vh",
     MainFrame: {
-      $: "> .main-frame",
-      inlineSize: { "": "0 100%", "@desktop": "min(100%, $layout-width)" },
+      $: "> MainFrame",
+      inlineSize: { "": "0 100%", "@md": "min(100%, $layout-width)" },
       inlineMargin: "auto",
       blockPadding: "$docs-nav-height start",
       inlinePadding: "0 start",
     },
     SidebarFrame: {
-      $: "& > .main-frame",
+      $: "& > [data-element=MainFrame]",
       inlinePadding: {
         "": null,
         "[data-has-sidebar]": "$sidebar-width start",
-        "([data-has-sidebar]) & (@mobile)": "0 start",
+        "([data-has-sidebar]) & (!@md)": "0 start",
       },
     },
     Columns: {
-      $: "> .main-frame > div",
-      display: { "": "flex", "@narrow-layout": "block" },
+      $: "> MainFrame > div",
+      display: { "": "flex", "!@lg": "block" },
       inlineSize: "min 0",
     },
   },

package/dist/components/Pagination.astro

@@ -12,7 +12,7 @@ const { prev, next } = pagination;
           <span>
             {Astro.locals.t("page.nextLink")}
             <br />
-            <span class="link-title">{next.label}</span>
+            <span data-element="Title">{next.label}</span>
           </span>
         </a>
       )}
@@ -21,7 +21,7 @@ const { prev, next } = pagination;
           <span>
             {Astro.locals.t("page.previousLink")}
             <br />
-            <span class="link-title">{prev.label}</span>
+            <span data-element="Title">{prev.label}</span>
           </span>
         </a>
       )}

package/dist/components/Pagination.styles.js

@@ -12,7 +12,7 @@ export const PaginationRoot = defineComponent("Pagination", {
   styles: {
     display: { "": "grid", "@media:print": "none" },
     gap: "($gap * 2)",
-    gridColumns: { "": "repeat(2, minmax(0, 1fr))", "@small": "1fr" },
+    gridColumns: { "": "repeat(2, minmax(0, 1fr))", "!@sm": "1fr" },
     Link: {
       $: "a",
       radius: "$radius",
@@ -22,9 +22,7 @@ export const PaginationRoot = defineComponent("Pagination", {
       gap: "$gap",
       inlineSize: "100%",
       padding: "($gap * 2)",
-      // Recolor only; Link owns the border width and style, including theme overrides.
-      // eslint-disable-next-line tasty/prefer-shorthand-property
-      borderColor: "#border",
+      border: "#clear",
       color: "#text-soft",
       fill: "#surface-2",
       shadow: "none",
@@ -37,12 +35,12 @@ export const PaginationRoot = defineComponent("Pagination", {
       gridColumn: {
         "": null,
         '@own([rel="prev"])': "1",
-        '(@own([rel="prev"])) & (@small)': "auto",
+        '(@own([rel="prev"])) & (!@sm)': "auto",
       },
       gridRow: {
         "": null,
         '@own([rel="prev"])': "1",
-        '(@own([rel="prev"])) & (@small)': "auto",
+        '(@own([rel="prev"])) & (!@sm)': "auto",
       },
     },
     NextLink: {
@@ -52,12 +50,12 @@ export const PaginationRoot = defineComponent("Pagination", {
       gridColumn: {
         "": null,
         '@own([rel="next"])': "2",
-        '(@own([rel="next"])) & (@small)': "auto",
+        '(@own([rel="next"])) & (!@sm)': "auto",
       },
       gridRow: {
         "": null,
         '@own([rel="next"])': "1",
-        '(@own([rel="next"])) & (@small)': "auto",
+        '(@own([rel="next"])) & (!@sm)': "auto",
       },
     },
     NextIcon: {
@@ -79,14 +77,16 @@ export const PaginationRoot = defineComponent("Pagination", {
     },
     HoverLink: {
       $: "a",
-      border: { "": null, "@own(:hover)": "$border-width solid #border" },
+      // Recolor only; Link owns the border width and style, including theme overrides.
+      // eslint-disable-next-line tasty/prefer-shorthand-property
+      borderColor: { "": null, "@own(:hover)": "#border" },
       fill: { "": null, "@own(:hover)": "#surface-2-hover" },
     },
     ActiveLink: {
       $: "a",
       fill: { "": null, "@own(:active)": "#surface-2-pressed" },
     },
-    Title: { $: ".link-title", color: "#heading", preset: "h5" },
+    Title: { $: "Title", color: "#heading", preset: "h5" },
     LoneNextLink: {
       // Preserve the conditional scope of this empty legacy customization hook.
       // eslint-disable-next-line tasty/no-state-in-selector