@tenphi/renderer 0.28.0 → 0.30.1

package/dist/components/MainContent.styles.js

@@ -1,4 +1,3 @@
-import { TASTY_SPACING_PROPERTIES } from "../theme/tasty-config.js";
 import { configureCookbookStates } from "./tasty-states.js";
 import { defineComponent } from "../define-component.js";
 
@@ -8,8 +7,7 @@ export const MainContentRoot = defineComponent("MainContent", {
   as: "main",
   "data-element": "MainContent",
   styles: {
-    "@property": TASTY_SPACING_PROPERTIES,
-    padding: "0 0 5rem",
+    padding: "5rem bottom",
     // A focus target for the skip link and page swaps, not a control. Clicking
     // its text focuses it, so keyboard scrolling would otherwise show a ring.
     outline: "none",
@@ -17,7 +15,7 @@ export const MainContentRoot = defineComponent("MainContent", {
     ContentSpacing: {
       $: ":where(Panel > Container) > * + *",
       blockMargin: "$margin-block-start $margin-block-end",
-      "$margin-block-start": "($gap * 3)",
+      "$margin-block-start": "3x",
     },
     Container: {
       $: "Panel > Container",
@@ -27,12 +25,12 @@ export const MainContentRoot = defineComponent("MainContent", {
     Panel: {
       $: "Panel",
       "$padding-block-start": {
-        "": "($gap * 3)",
-        "@own(:nth-of-type(2))": "($gap * 2)",
+        "": "3x",
+        "@own(:nth-of-type(2))": "2x",
       },
       "$padding-block-end": {
-        "": "($gap * 3)",
-        "@own(:first-of-type)": "($gap * 2)",
+        "": "3x",
+        "@own(:first-of-type)": "2x",
       },
       blockPadding: "$padding-block-start $padding-block-end",
       inlinePadding: "$docs-content-pad-x",

package/dist/components/MainPane.styles.js

@@ -12,8 +12,8 @@ export const MainPaneRoot = defineComponent("MainPane", {
     inlineSize: {
       "": "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]) & (!@lg)": "100%",
+        "min((100% - $sidebar-width), ($content-width + (100% - $content-width - $sidebar-width) / 2))",
+      "[data-has-sidebar] & [data-has-toc] & !@lg": "100%",
     },
   },
 });

package/dist/components/MarkdownAlert.styles.js

@@ -8,36 +8,36 @@ export function MarkdownAlertStyles() {
   useGlobalStyles(
     ".cookbook-alert",
     resolveComponentStyles("MarkdownAlert", {
-      padding: "($gap * 2) ($gap * 2.5)",
+      padding: "2x 2.5x",
       color: {
         "": "#text-soft",
-        "[data-note]": "#blue-text",
-        "[data-tip]": "#green-text",
+        "[data-note]": "#info-text",
+        "[data-tip]": "#success-text",
         "[data-caution]": "#warning-text",
-        "[data-danger]": "#red-text",
+        "[data-danger]": "#danger-text",
       },
       border: {
         "": true,
-        "[data-note]": "#blue",
-        "[data-tip]": "#green",
+        "[data-note]": "#info",
+        "[data-tip]": "#success",
         "[data-caution]": "#warning",
-        "[data-danger]": "#red",
+        "[data-danger]": "#danger",
       },
-      radius: "$card-radius",
+      radius: "1cr",
       fill: {
         "": "#surface-2",
-        "[data-note]": "#blue-surface",
-        "[data-tip]": "#green-surface",
+        "[data-note]": "#info-surface",
+        "[data-tip]": "#success-surface",
         "[data-caution]": "#warning-surface",
-        "[data-danger]": "#red-surface",
+        "[data-danger]": "#danger-surface",
       },
       Title: {
         $: "Title",
         display: "flex",
         alignItems: "center",
-        gap: "$gap",
+        gap: "1x",
         "$margin-block-start": "0",
-        "$margin-block-end": "$gap",
+        "$margin-block-end": "1x",
         blockMargin: "$margin-block-start $margin-block-end",
         inlineMargin: "0",
         color: "inherit",

package/dist/components/MarkdownCodeBlock.styles.js

@@ -21,23 +21,22 @@ export function MarkdownCodeBlockStyles() {
         "$margin-block-end": "0",
         blockMargin: "$margin-block-start $margin-block-end",
         inlineMargin: "0",
-        padding: "0 3.75rem 0 1rem",
+        inlinePadding: "1rem 3.75rem",
         // Balance a single code line around the copy control, including the border.
-        blockPadding:
-          "max(0px, ($copy-button-size - 1lh) / 2 + $gap - $border-width)",
+        blockPadding: "max(0px, ($copy-button-size - 1lh) / 2 + 1x - 1bw)",
         overflowX: "auto",
         color: "#syntax-text",
         border: true,
         fill: "#syntax-bg",
-        radius: "$card-radius",
+        radius: "1cr",
         tabSize: "2",
       },
       CopyButton: {
         $: "> CopyButton",
         position: "absolute",
         zIndex: "1",
-        blockInset: "$gap start",
-        inlineInset: "$gap end",
+        blockInset: "1x start",
+        inlineInset: "1x end",
         "$margin-block-start": "0",
         "$margin-block-end": "0",
         blockMargin: "$margin-block-start $margin-block-end",
@@ -50,10 +49,10 @@ export function MarkdownCodeBlockStyles() {
         color: "#text-soft",
         border: true,
         fill: "#surface-2",
-        radius: "$radius",
+        radius: "1r",
         preset: "small / strong",
         cursor: "pointer",
-        transition: "color $transition, fill $transition",
+        transition: "color, fill",
       },
       HoverCopyButton: {
         $: '> [data-element="CopyButton"]',
@@ -118,8 +117,6 @@ export function MarkdownCodeBlockStyles() {
         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 > code > Line:empty::before",
         content: { "": null, diff: '"\\200b"' },
       },

package/dist/components/MarkdownContent.styles.js

@@ -38,7 +38,7 @@ export default function MarkdownStyles() {
           "": null,
           "@prose-block": "$margin-block-start $margin-block-end",
         },
-        "$margin-block-start": { "": null, "@prose-block": "($gap * 3)" },
+        "$margin-block-start": { "": null, "@prose-block": "3x" },
       },
       HeadingSpacing: {
         $: "* + h1, * + h2, * + h3, * + h4, * + h5, * + h6, * + [data-element=MarkdownHeading]",
@@ -55,7 +55,7 @@ export default function MarkdownStyles() {
       },
       CompactItem: {
         $: ":where(li + li), :where(dt + dt), :where(dt + dd), :where(dd + dd)",
-        "$margin-block-start": { "": null, "@prose": "($gap * 0.5)" },
+        "$margin-block-start": { "": null, "@prose": "0.5x" },
         "$margin-block-end": { "": null, "@prose": "0" },
         blockMargin: {
           "": null,
@@ -72,7 +72,7 @@ export default function MarkdownStyles() {
       },
       DefinitionDescription: {
         $: "dd",
-        inlinePadding: { "": null, "@prose": "($gap * 2) start" },
+        inlinePadding: { "": null, "@prose": "2x start" },
       },
       Link: {
         // Keep ordinary prose links at their former weight so heading controls own color.
@@ -96,12 +96,12 @@ export default function MarkdownStyles() {
       Rule: {
         $: "hr",
         border: { "": null, "@prose": "0" },
-        blockBorder: { "": null, "@prose": "$border-width solid #border end" },
+        blockBorder: { "": null, "@prose": "1bw solid #border end" },
       },
       Details: {
         $: "details",
         "$details-border-width": "2px",
-        inlinePadding: { "": null, "@prose": "($gap * 2) start" },
+        inlinePadding: { "": null, "@prose": "2x start" },
         inlineBorder: {
           "": null,
           "@prose": "$details-border-width solid #border start",
@@ -122,7 +122,7 @@ export default function MarkdownStyles() {
       },
       Summary: {
         $: "summary",
-        display: { "": "", "@prose": "block" },
+        display: { "": null, "@prose": "block" },
         inlineMargin: { "": null, "@prose": "-0.5rem start" },
         inlinePadding: { "": null, "@prose": "0.5rem start" },
         color: { "": null, "@prose": "#text" },
@@ -136,7 +136,7 @@ export default function MarkdownStyles() {
         },
         "$margin-block-end": {
           "": null,
-          "@own(:is([open] >)) & @prose": "($gap * 2)",
+          "@own(:is([open] >)) & @prose": "2x",
         },
         blockMargin: {
           "": null,
@@ -145,36 +145,30 @@ export default function MarkdownStyles() {
         },
       },
       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([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([data-not-content] *)::before",
         content: '""',
         display: "inline-block",
         inlineSize: "1.25rem",
         blockSize: "1.25rem",
-        inlineMargin: "($gap * 0.5) end",
+        inlineMargin: "0.5x end",
         verticalAlign: "middle",
         fill: "#current",
         // The imported SVG is encoded at build time and never evaluated in the browser.
         // eslint-disable-next-line tasty/no-runtime-styles-mutation
         mask: `url("${svgIconUrl(chevronRightIcon)}") center / contain no-repeat`,
-        transition: "rotate $transition",
+        transition: "rotate",
       },
       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([data-not-content] *)::before",
+        $: "summary:is(details[open] > *):not([data-not-content] *)::before",
         rotate: "90deg",
       },
       Code: {
         $: ":where(code)",
-        radius: { "": null, "@prose": "($radius * 0.65)" },
+        radius: { "": null, "@prose": "0.65r" },
       },
     }),
   );

package/dist/components/MarkdownHeading.styles.js

@@ -24,11 +24,11 @@ export function MarkdownHeadingStyles() {
       Heading: {
         $: "> *",
         color: { "": null, "@own(:first-child)": "inherit" },
-        display: { "": "", "@own(:first-child)": "inline" },
+        display: { "": null, "@own(:first-child)": "inline" },
         inlinePadding: {
           "": null,
           "@own(:first-child)": "0 end",
-          "(@own(:first-child)) & (!@md)": "1.75rem end",
+          "@own(:first-child) & !@md": "1.75rem end",
         },
       },
       Link: {
@@ -51,10 +51,10 @@ export function MarkdownHeadingStyles() {
           "@media(hover: hover)": "0",
           "!@md": "1",
         },
-        radius: "$radius",
+        radius: "1r",
         userSelect: "none",
         textDecoration: "none",
-        transition: "color $transition, fill $transition, opacity $transition",
+        transition: "color, fill, opacity",
       },
       RevealedLink: {
         $: "> [data-element=Anchor]",
@@ -98,8 +98,6 @@ export function MarkdownHeadingStyles() {
         },
       },
       CopiedIcon: {
-        // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
-        // eslint-disable-next-line tasty/no-state-in-selector
         $: '> Anchor[data-copy-state="copied"]::after',
         content: '""',
         position: "absolute",

package/dist/components/MarkdownInlineCode.styles.js

@@ -12,7 +12,7 @@ export function MarkdownInlineCodeStyles() {
       color: "#text-soft",
       fill: "#surface-3",
       preset: "inline-code",
-      radius: "($radius * 0.65)",
+      radius: "0.65r",
     }),
   );
   return null;

package/dist/components/MarkdownTable.styles.js

@@ -15,12 +15,12 @@ export function MarkdownTableStyles() {
         borderSpacing: "0",
         color: "#text-soft",
         preset: "small",
-        border: "$border-width solid #border",
-        radius: "$card-radius",
+        border: true,
+        radius: "1cr",
       },
       Cell: {
         $: "th, td",
-        padding: "($gap * 1.5) ($gap * 2)",
+        padding: "1.5x 2x",
         verticalAlign: "top",
         textAlign: {
           "": null,
@@ -36,20 +36,17 @@ 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(tr:last-child >))": "0" },
+        borderBlockEnd: { "": null, "@own(:is(tr:last-child >))": "0" },
       },
       HeaderCell: {
         $: "th",
         color: "#text",
         fill: "#surface-2",
         textAlign: { "": "start", "@own(align)": null },
+        // Round only the top corners so the header row matches in either direction.
         radius: {
-          "@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 >) & !:first-child & :last-child)":
-            "($card-radius - $border-width) top-right",
-          "@own(:is(thead:first-child tr:first-child >) & :first-child & :last-child)":
-            "($card-radius - $border-width) top",
+          "": null,
+          "@own(:is(thead:first-child tr:first-child >))": "(1cr - 1bw) top",
         },
       },
       Scroll: {

package/dist/components/Mermaid.styles.js

@@ -11,11 +11,11 @@ export function MermaidStyles() {
       display: "grid",
       placeItems: "center",
       inlineSize: "min 0",
-      padding: "($gap * 2)",
+      padding: "2x",
       overflowX: "auto",
       border: true,
       fill: "#surface-2",
-      radius: "$card-radius",
+      radius: "1cr",
       Diagram: {
         $: "> svg",
         $bg: "#surface-2",

package/dist/components/MermaidSource.styles.js

@@ -13,7 +13,7 @@ export function MermaidSourceStyles() {
       color: "#syntax-text",
       border: true,
       fill: "#syntax-bg",
-      radius: "$card-radius",
+      radius: "1cr",
       tabSize: "2",
     }),
   );

package/dist/components/MobileMenuFooter.styles.js

@@ -11,17 +11,17 @@ export const MobileMenuFooterRoot = defineComponent("MobileMenuFooter", {
     alignItems: "center",
     justifyContent: "space-between",
     flow: "row wrap",
-    gap: "($gap * 2)",
-    blockPadding: "$gap",
-    blockBorder: "$border-width solid #border start",
+    gap: "2x",
+    blockPadding: "1x",
+    blockBorder: "1bw solid #border start",
     Social: {
       $: "Social",
       display: "flex",
       hide: { "": false, ":empty": true },
       alignItems: "center",
-      gap: "($gap * 2)",
+      gap: "2x",
       inlineMargin: "auto end",
-      blockPadding: "($gap * 2)",
+      blockPadding: "2x",
     },
   },
 });

package/dist/components/MobileMenuToggle.styles.js

@@ -11,14 +11,14 @@ export const MobileMenuToggleRoot = extendComponent(
     "data-element": "MobileMenuToggle",
     styles: {
       color: { ":hover": "#text", ":active": "#accent-text" },
-      display: { "": "none", "!@md": "flex" },
+      hide: { "": true, "!@md": false },
       inlineSize: "(100% + ($docs-nav-pad-x * 2))",
       inlineMargin: "(-1 * $docs-nav-pad-x)",
       blockSize: "0 3rem initial",
       flexShrink: "0",
       padding: "0 $docs-nav-pad-x",
       border: "0",
-      blockBorder: "$border-width solid #border start",
+      blockBorder: "1bw solid #border start",
       radius: "0",
       fill: "#clear",
       preset: "navigation",

package/dist/components/MobileNavigationTabs.styles.js

@@ -11,7 +11,7 @@ export const MobileNavigationTabsRoot = defineComponent(
     styles: {
       display: "grid",
       hide: { "": false, "@md": true },
-      gap: "$gap",
+      gap: "1x",
       blockMargin: "0",
       Label: {
         $: "Label",
@@ -24,11 +24,11 @@ export const MobileNavigationTabsRoot = defineComponent(
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
-        gap: "$gap",
+        gap: "1x",
         blockSize: "min 2.75rem",
-        padding: "$gap ($gap * 1.25)",
+        padding: "1x 1.25x",
         border: true,
-        radius: "$radius",
+        radius: "1r",
         color: "#text-soft",
         fill: "#surface",
         preset: "navigation",
@@ -50,12 +50,11 @@ export const MobileNavigationTabsRoot = defineComponent(
         $: "ul",
         display: "grid",
         gap: "1bw",
-        padding: "$gap",
-        blockMargin: "$gap start",
-        margin: "$gap 0 0",
+        padding: "1x",
+        margin: "1x top",
         listStyle: "none",
         border: true,
-        radius: "$radius",
+        radius: "1r",
         fill: "#surface",
       },
       Item: { $: "li", margin: "0" },
@@ -64,11 +63,11 @@ export const MobileNavigationTabsRoot = defineComponent(
         display: "flex",
         alignItems: "center",
         blockSize: "min 2.25rem",
-        padding: "($gap * 0.75) ($gap * 1.25)",
+        padding: "0.75x 1.25x",
         color: "#text-soft",
         preset: "navigation",
         textDecoration: "none",
-        radius: "$radius",
+        radius: "1r",
       },
       HoverLink: {
         $: "a",

package/dist/components/MobileTableOfContents.styles.js

@@ -11,16 +11,16 @@ export const MobileTableOfContentsRoot = defineComponent(
     styles: {
       display: "block",
       hide: { "": true, "!@lg": false },
-      padding: "$gap $docs-sidebar-pad-x",
-      blockBorder: "$border-width solid #border end",
+      padding: "1x $docs-sidebar-pad-x",
+      blockBorder: "1bw solid #border end",
       fill: "#surface",
       Summary: {
         $: "summary",
-        padding: "$gap",
+        padding: "1x",
         color: "#text",
         preset: "small / strong",
         cursor: "pointer",
-        radius: "$radius",
+        radius: "1r",
       },
       List: {
         $: "ul",
@@ -31,15 +31,15 @@ export const MobileTableOfContentsRoot = defineComponent(
         display: "grid",
         gap: "$item-gap",
       },
-      NestedList: { $: "ul ul", inlinePadding: "($gap * 2) start" },
+      NestedList: { $: "ul ul", inlinePadding: "2x start" },
       Item: { $: "li", listStyle: "none", margin: "0", padding: "0" },
       Link: {
         $: "a",
         display: "block",
-        padding: "$gap",
+        padding: "1x",
         color: "#text-soft",
         preset: "small",
-        radius: "$radius",
+        radius: "1r",
         textDecoration: "none",
       },
       HoverLink: {

package/dist/components/PackageVersion.styles.js

@@ -12,7 +12,7 @@ export const PackageVersionRoot = defineComponent("PackageVersion", {
     alignItems: "center",
     flexShrink: "0",
     blockSize: "min 1.5rem",
-    inlinePadding: "($gap * 0.75)",
+    inlinePadding: "0.75x",
     color: "#text-soft",
     fill: "#surface-2",
     border: true,

package/dist/components/PageActions.styles.js

@@ -10,15 +10,15 @@ export const PageActionsRoot = defineComponent("PageActions", {
     display: "flex",
     flow: "row wrap",
     alignItems: "center",
-    gap: "$gap",
+    gap: "1x",
     preset: "small",
     Control: {
       $: "button, a",
       display: "inline-flex",
       alignItems: "center",
-      padding: "$gap ($gap * 1.5)",
+      padding: "1x 1.5x",
       border: true,
-      radius: "$radius",
+      radius: "1r",
       color: "#text",
       fill: "#surface",
       preset: "small",

package/dist/components/PageFrame.styles.js

@@ -22,7 +22,7 @@ export const PageFrameRoot = defineComponent("PageFrame", {
       inlinePadding: {
         "": null,
         "[data-has-sidebar]": "$sidebar-width start",
-        "([data-has-sidebar]) & (!@md)": "0 start",
+        "[data-has-sidebar] & !@md": "0 start",
       },
     },
     Columns: {

package/dist/components/Pagination.styles.js

@@ -10,23 +10,24 @@ export const PaginationRoot = defineComponent("Pagination", {
   as: "div",
   "data-element": "Pagination",
   styles: {
-    display: { "": "grid", "@media:print": "none" },
-    gap: "($gap * 2)",
+    display: "grid",
+    hide: { "": false, "@media:print": true },
+    gap: "2x",
     gridColumns: { "": "repeat(2, minmax(0, 1fr))", "!@sm": "1fr" },
     Link: {
       $: "a",
-      radius: "$radius",
+      radius: "1r",
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-start",
-      gap: "$gap",
+      gap: "1x",
       inlineSize: "100%",
-      padding: "($gap * 2)",
+      padding: "2x",
       border: true,
       color: "#text-soft",
       fill: "#surface-2",
       shadow: "none",
-      transition: "color $transition, background-color $transition",
+      transition: "color, fill",
       textDecoration: "none",
       overflowWrap: "anywhere",
     },
@@ -35,12 +36,12 @@ export const PaginationRoot = defineComponent("Pagination", {
       gridColumn: {
         "": null,
         '@own([rel="prev"])': "1",
-        '(@own([rel="prev"])) & (!@sm)': "auto",
+        '@own([rel="prev"]) & !@sm': "auto",
       },
       gridRow: {
         "": null,
         '@own([rel="prev"])': "1",
-        '(@own([rel="prev"])) & (!@sm)': "auto",
+        '@own([rel="prev"]) & !@sm': "auto",
       },
     },
     NextLink: {
@@ -50,17 +51,15 @@ export const PaginationRoot = defineComponent("Pagination", {
       gridColumn: {
         "": null,
         '@own([rel="next"])': "2",
-        '(@own([rel="next"])) & (!@sm)': "auto",
+        '@own([rel="next"]) & !@sm': "auto",
       },
       gridRow: {
         "": null,
         '@own([rel="next"])': "1",
-        '(@own([rel="next"])) & (!@sm)': "auto",
+        '@own([rel="next"]) & !@sm': "auto",
       },
     },
     NextIcon: {
-      // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
-      // eslint-disable-next-line tasty/no-state-in-selector
       $: 'a[rel="next"]::before',
       order: "1",
       // The imported SVG is encoded at build time and never evaluated in the browser.
@@ -107,17 +106,13 @@ export const PaginationRoot = defineComponent("Pagination", {
       mask: `url("${svgIconUrl(arrowLeftIcon)}") center / contain no-repeat`,
     },
     PreviousIconRtl: {
-      // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
-      // eslint-disable-next-line tasty/no-state-in-selector
-      $: '&:is([dir="rtl"] *) a[rel="prev"]::before',
+      $: 'a[rel="prev"]:dir(rtl)::before',
       // The imported SVG is encoded at build time and never evaluated in the browser.
       // eslint-disable-next-line tasty/no-runtime-styles-mutation
       mask: `url("${svgIconUrl(arrowRightIcon)}") center / contain no-repeat`,
     },
     NextIconRtl: {
-      // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
-      // eslint-disable-next-line tasty/no-state-in-selector
-      $: '&:is([dir="rtl"] *) a[rel="next"]::before',
+      $: 'a[rel="next"]:dir(rtl)::before',
       // The imported SVG is encoded at build time and never evaluated in the browser.
       // eslint-disable-next-line tasty/no-runtime-styles-mutation
       mask: `url("${svgIconUrl(arrowLeftIcon)}") center / contain no-repeat`,

package/dist/components/Preview.styles.js

@@ -53,7 +53,7 @@ export const PreviewRoot = defineComponent("Preview", {
       preset: "small",
       fill: "#surface-2",
       cursor: "pointer",
-      transition: "fill $transition",
+      transition: "fill",
     },
     HoverSummary: {
       $: "> details > summary",