@tenphi/renderer 0.21.0 → 0.21.2

package/dist/components/MobileMenuToggle.styles.js

@@ -0,0 +1,49 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { extendComponent } from "../define-component.js";
+import { Button } from "./Button.styles.js";
+
+configureCookbookStates();
+
+export const MobileMenuToggleRoot = extendComponent(
+  "MobileMenuToggle",
+  Button,
+  {
+    "data-element": "MobileMenuToggle",
+    styles: {
+      color: { ":hover": "#text", ":active": "#accent-text" },
+      display: { "": "none", "@mobile": "flex" },
+      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",
+      radius: "0",
+      fill: "#clear",
+      preset: "navigation",
+      textAlign: "start",
+      Icon: {
+        $: "> svg",
+        flexShrink: "0",
+        inlineSize: "1.125rem",
+        blockSize: "1.125rem",
+      },
+      Section: {
+        $: ".td-menu-button__section",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        inlineSize: "max 40%",
+      },
+      Page: {
+        $: ".td-menu-button__page",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        color: "#text",
+        preset: "navigation / strong",
+      },
+    },
+  },
+);

package/dist/components/MobileNavigationTabs.astro

@@ -8,7 +8,7 @@ import { messages } from "../localization.js";
 import { content } from "virtual:cookbook/config";
 import { layout as configuredLayout } from "virtual:cookbook/layout";
 import { activeNavigationTab, navigationPath } from "../navigation.js";
-import { MobileNavigationTabsRoot } from "./LayoutComponents.js";
+import { MobileNavigationTabsRoot } from "./MobileNavigationTabs.styles.js";
 
 interface Props {
   base?: string;
@@ -45,7 +45,6 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
     <MobileNavigationTabsRoot
       className="td-mobile-tabs cookbook-print-hidden"
       aria-label={ui.sections}
-      data-tasty-anatomy="MobileNavigationTabs"
     >
       <details>
         <summary aria-label={ui.chooseSection}>

package/dist/components/MobileNavigationTabs.styles.js

@@ -0,0 +1,88 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const MobileNavigationTabsRoot = defineComponent(
+  "MobileNavigationTabs",
+  {
+    as: "nav",
+    "data-element": "MobileNavigationTabs",
+    styles: {
+      display: "grid",
+      hide: { "": false, "@desktop": true },
+      gap: "$gap",
+      blockMargin: "0",
+      Label: {
+        $: ".td-mobile-tabs__label",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+      Trigger: {
+        $: "summary",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "$gap",
+        blockSize: "min 2.75rem",
+        padding: "$gap ($gap * 1.25)",
+        border: true,
+        radius: "$radius",
+        color: "#text-soft",
+        fill: "#surface",
+        preset: "navigation",
+        listStyle: "none",
+      },
+      Marker: {
+        $: "summary::marker, summary::-webkit-details-marker",
+        hide: true,
+      },
+      Caret: { $: "summary > svg", flexShrink: "0" },
+      ExpandedCaret: {
+        $: "details > summary > svg",
+        rotate: {
+          "": null,
+          "@own(:is(details[open] > summary > svg))": "180deg",
+        },
+      },
+      List: {
+        $: "ul",
+        display: "grid",
+        gap: "1bw",
+        padding: "$gap",
+        blockMargin: "$gap start",
+        margin: "$gap 0 0",
+        listStyle: "none",
+        border: true,
+        radius: "$radius",
+        fill: "#surface",
+      },
+      Item: { $: "li", margin: "0" },
+      Link: {
+        $: "a",
+        display: "flex",
+        alignItems: "center",
+        blockSize: "min 2.25rem",
+        padding: "($gap * 0.75) ($gap * 1.25)",
+        color: "#text-soft",
+        preset: "navigation",
+        textDecoration: "none",
+        radius: "$radius",
+      },
+      HoverLink: {
+        $: "a",
+        color: { "": null, "@own(:hover)": "#text" },
+        fill: { "": null, "@own(:hover)": "#surface-2-hover" },
+      },
+      CurrentLink: {
+        $: "a",
+        color: { "": null, '@own([aria-current="page"])': "#accent-text" },
+        fill: {
+          "": null,
+          '@own([aria-current="page"])': "#accent-surface-subtle",
+        },
+      },
+    },
+  },
+);

package/dist/components/MobileTableOfContents.styles.js

@@ -0,0 +1,59 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const MobileTableOfContentsRoot = defineComponent(
+  "MobileTableOfContents",
+  {
+    as: "cookbook-mobile-toc",
+    "data-element": "MobileTableOfContents",
+    styles: {
+      display: "block",
+      hide: { "": true, "@narrow-layout": false },
+      padding: "$gap $docs-sidebar-pad-x",
+      blockBorder: "$border-width solid #border end",
+      fill: "#surface",
+      Summary: {
+        $: "summary",
+        padding: "$gap",
+        color: "#text",
+        preset: "small / strong",
+        cursor: "pointer",
+        radius: "$radius",
+      },
+      List: {
+        $: "ul",
+        listStyle: "none",
+        padding: "0",
+        margin: "0",
+        display: "grid",
+        gap: "2px",
+      },
+      NestedList: { $: "ul ul", inlinePadding: "($gap * 2) start" },
+      Item: { $: "li", listStyle: "none", margin: "0", padding: "0" },
+      Link: {
+        $: "a",
+        display: "block",
+        padding: "$gap",
+        color: "#text-soft",
+        preset: "small",
+        radius: "$radius",
+        textDecoration: "none",
+      },
+      HoverLink: {
+        $: "a",
+        fill: { "": null, "@own(:hover)": "#surface-2" },
+        color: { "": null, "@own(:hover)": "#text" },
+      },
+      Focus: {
+        $: "a, summary",
+        outline: {
+          "": null,
+          "@own(:is(a:focus-visible)) | @own(:is(summary:focus-visible))":
+            "2px solid #focus / 2px",
+        },
+      },
+    },
+  },
+);

package/dist/components/PackageVersion.astro

@@ -1,7 +1,7 @@
 ---
 import { messages } from "../localization.js";
 import { content } from "virtual:cookbook/config";
-import { PackageVersionRoot } from "./LayoutComponents.js";
+import { PackageVersionRoot } from "./PackageVersion.styles.js";
 
 interface Props {
   version?: string;
@@ -17,7 +17,6 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
     <PackageVersionRoot
       className="td-package-version"
       aria-label={`${ui.version} ${version}`}
-      data-tasty-anatomy="PackageVersion"
     >
       {label}
     </PackageVersionRoot>

package/dist/components/PackageVersion.styles.js

@@ -0,0 +1,23 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const PackageVersionRoot = defineComponent("PackageVersion", {
+  as: "span",
+  "data-element": "PackageVersion",
+  styles: {
+    display: "inline-flex",
+    hide: { "": false, "@compact": true },
+    alignItems: "center",
+    flexShrink: "0",
+    blockSize: "min 1.5rem",
+    inlinePadding: "($gap * 0.75)",
+    color: "#text-soft",
+    fill: "#surface-2",
+    border: true,
+    radius: "999px",
+    preset: "small",
+    whiteSpace: "nowrap",
+  },
+});

package/dist/components/PageActions.astro

@@ -1,5 +1,5 @@
 ---
-import { PageActionsRoot } from "./LayoutComponents.js";
+import { PageActionsRoot } from "./PageActions.styles.js";
 import { content } from "virtual:cookbook/config";
 import { navigationPath } from "../navigation.js";
 import { agentPagePath } from "../page-metadata.js";
@@ -13,7 +13,7 @@ const enabled =
 
 {
   enabled && (
-    <PageActionsRoot data-tasty-anatomy="PageActions">
+    <PageActionsRoot>
       <button type="button" data-copy-page={agentPagePath(route, content.base)}>
         {ui.copyPage}
       </button>

package/dist/components/PageActions.styles.js

@@ -0,0 +1,51 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const PageActionsRoot = defineComponent("PageActions", {
+  as: "cookbook-page-actions",
+  "data-element": "PageActions",
+  styles: {
+    display: "flex",
+    flow: "row wrap",
+    alignItems: "center",
+    gap: "$gap",
+    preset: "small",
+    Control: {
+      $: "button, a",
+      display: "inline-flex",
+      alignItems: "center",
+      padding: "$gap ($gap * 1.5)",
+      border: true,
+      radius: "$radius",
+      color: "#text",
+      fill: "#surface",
+      preset: "small",
+      textDecoration: "none",
+      cursor: "pointer",
+    },
+    Hover: {
+      $: "button, a",
+      fill: {
+        "": null,
+        "@own(:hover)": "#surface-2",
+      },
+    },
+    Focus: {
+      $: "button, a",
+      outline: {
+        "": null,
+        "@own(:focus-visible)": "2px solid #focus / 2px",
+      },
+    },
+    Pending: {
+      $: "button",
+      cursor: { "": null, '@own([aria-disabled="true"])': "wait" },
+    },
+    Status: {
+      $: "*",
+      color: { "": null, "@own([role=status])": "#text-soft" },
+    },
+  },
+});

package/dist/components/PageFrame.styles.js

@@ -0,0 +1,34 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const PageFrameRoot = defineComponent("PageFrame", {
+  as: "div",
+  "data-element": "PageFrame",
+  styles: {
+    display: "flex",
+    flow: "column",
+    blockSize: "min 100vh",
+    MainFrame: {
+      $: "> .main-frame",
+      inlineSize: { "": "0 100%", "@desktop": "min(100%, $layout-width)" },
+      inlineMargin: "auto",
+      blockPadding: "$docs-nav-height start",
+      inlinePadding: "0 start",
+    },
+    SidebarFrame: {
+      $: "& > .main-frame",
+      inlinePadding: {
+        "": null,
+        "[data-has-sidebar]": "$sidebar-width start",
+        "([data-has-sidebar]) & (@mobile)": "0 start",
+      },
+    },
+    Columns: {
+      $: "> .main-frame > div",
+      display: { "": "flex", "@narrow-layout": "block" },
+      inlineSize: "min 0",
+    },
+  },
+});

package/dist/components/Pagination.astro

@@ -1,11 +1,12 @@
 ---
+import { PaginationRoot } from "./Pagination.styles.js";
 const { dir, pagination } = Astro.locals.cookbookRoute;
 const { prev, next } = pagination;
 ---
 
 {
   (next || prev) && (
-    <div class="pagination-links" dir={dir} data-tasty-anatomy="Pagination">
+    <PaginationRoot className="pagination-links" dir={dir}>
       {next && (
         <a href={next.href} rel="next">
           <span>
@@ -24,6 +25,6 @@ const { prev, next } = pagination;
           </span>
         </a>
       )}
-    </div>
+    </PaginationRoot>
   )
 }

package/dist/components/Pagination.styles.js

@@ -0,0 +1,126 @@
+import arrowLeftIcon from "../icons/arrow-left.svg?raw";
+import arrowRightIcon from "../icons/arrow-right.svg?raw";
+import { svgIconUrl } from "./svg-icon.js";
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const PaginationRoot = defineComponent("Pagination", {
+  as: "div",
+  "data-element": "Pagination",
+  styles: {
+    display: { "": "grid", "@media:print": "none" },
+    gap: "($gap * 2)",
+    gridColumns: { "": "repeat(2, minmax(0, 1fr))", "@small": "1fr" },
+    Link: {
+      $: "a",
+      radius: "$radius",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      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",
+      color: "#text-soft",
+      fill: "#surface-2",
+      shadow: "none",
+      transition: "color $transition, background-color $transition",
+      textDecoration: "none",
+      overflowWrap: "anywhere",
+    },
+    PreviousLink: {
+      $: "a",
+      gridColumn: {
+        "": null,
+        '@own([rel="prev"])': "1",
+        '(@own([rel="prev"])) & (@small)': "auto",
+      },
+      gridRow: {
+        "": null,
+        '@own([rel="prev"])': "1",
+        '(@own([rel="prev"])) & (@small)': "auto",
+      },
+    },
+    NextLink: {
+      $: "a",
+      justifyContent: { "": null, '@own([rel="next"])': "flex-start" },
+      textAlign: { "": null, '@own([rel="next"])': "end" },
+      gridColumn: {
+        "": null,
+        '@own([rel="next"])': "2",
+        '(@own([rel="next"])) & (@small)': "auto",
+      },
+      gridRow: {
+        "": null,
+        '@own([rel="next"])': "1",
+        '(@own([rel="next"])) & (@small)': "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.
+      // eslint-disable-next-line tasty/no-runtime-styles-mutation
+      mask: `url("${svgIconUrl(arrowRightIcon)}") center / contain no-repeat`,
+    },
+    NextLabel: {
+      $: "a > span",
+      inlineMargin: {
+        "": null,
+        '@own(:is(a[rel="next"] > span))': "auto start",
+      },
+      textAlign: { "": null, '@own(:is(a[rel="next"] > span))': "end" },
+    },
+    HoverLink: {
+      $: "a",
+      border: { "": null, "@own(:hover)": "$border-width solid #border" },
+      fill: { "": null, "@own(:hover)": "#surface-2-hover" },
+    },
+    ActiveLink: {
+      $: "a",
+      fill: { "": null, "@own(:active)": "#surface-2-pressed" },
+    },
+    Title: { $: ".link-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
+      $: 'a[rel="next"]:only-child',
+    },
+    Icon: {
+      $: "a::before",
+      content: '""',
+      display: "block",
+      flexGrow: "0",
+      flexShrink: "0",
+      flexBasis: "auto",
+      inlineSize: "1.25rem",
+      blockSize: "1.25rem",
+      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(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',
+      // 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',
+      // 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.astro

@@ -1,7 +1,7 @@
 ---
 import { messages, requestLanguage } from "../localization.js";
 import { content } from "virtual:cookbook/config";
-import { PreviewRoot } from "./TastyComponents.js";
+import { PreviewRoot } from "./Preview.styles.js";
 
 import type { PreviewProps as Props } from "./props.js";
 
@@ -13,11 +13,7 @@ const ui = messages(
 );
 ---
 
-<PreviewRoot
-  className="td-preview not-content"
-  aria-label={title}
-  data-tasty-anatomy="Preview"
->
+<PreviewRoot className="td-preview not-content" aria-label={title}>
   <PreviewRoot.Caption><strong>{title}</strong></PreviewRoot.Caption>
   <PreviewRoot.Stage className="td-preview__stage">
     <PreviewRoot.Frame

package/dist/components/Preview.styles.js

@@ -0,0 +1,78 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+const previewElements = {
+  Caption: "figcaption",
+  Stage: "div",
+  Frame: "iframe",
+  Code: "details",
+  Summary: "summary",
+  Pre: "pre",
+};
+
+export const PreviewRoot = defineComponent("Preview", {
+  as: "figure",
+  "data-element": "Preview",
+  styles: {
+    margin: "0",
+    overflow: "clip",
+    color: "#text",
+    border: true,
+    radius: "1cr",
+    fill: "#surface",
+    shadow: "0 1px 2px #shadow",
+
+    Caption: {
+      padding: "1.5x 2x",
+      preset: "small",
+      fill: "#surface-2",
+    },
+    Stage: {
+      padding: "2x",
+      fill: "#surface",
+    },
+    Frame: {
+      display: "block",
+      width: "100%",
+      height: "min 10rem",
+      border: "0",
+      fill: "#surface",
+    },
+    Code: {
+      border: "1bw top #border",
+    },
+    Summary: {
+      padding: "1.5x 2x",
+      preset: "small",
+      fill: "#surface-2",
+      cursor: "pointer",
+      transition: "fill $transition",
+    },
+    HoverSummary: {
+      $: "> details > summary",
+      fill: {
+        "": null,
+        "@own(:is(details > summary:hover))": "#surface-2-hover",
+      },
+    },
+    ActiveSummary: {
+      $: "> details > summary",
+      fill: {
+        "": null,
+        "@own(:is(details > summary:active))": "#surface-2-pressed",
+      },
+    },
+    Pre: {
+      margin: "0",
+      padding: "2x",
+      overflowX: "auto",
+      color: "#syntax-text",
+      fill: "#syntax-bg",
+      preset: "code",
+      radius: "0",
+    },
+  },
+  elements: previewElements,
+});