@tenphi/renderer 0.21.1 → 0.21.2

package/dist/components/HeaderFrame.styles.js

@@ -0,0 +1,20 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const HeaderFrameRoot = defineComponent("HeaderFrame", {
+  as: "header",
+  "data-element": "HeaderFrame",
+  styles: {
+    position: "fixed",
+    zIndex: "10",
+    inset: "0 0 auto",
+    inlineSize: "100%",
+    blockSize: "$docs-nav-height",
+    padding: "0 $docs-nav-pad-x",
+    blockBorder: "$border-width solid #border end",
+    fill: "#header",
+    backdropFilter: "blur(16px)",
+  },
+});

package/dist/components/HeaderLinks.astro

@@ -3,7 +3,7 @@ import { messages } from "../localization.js";
 import { localeHref, routeLocale } from "../localization.js";
 import { navigationPath } from "../navigation.js";
 import { content } from "virtual:cookbook/config";
-import { HeaderLinksRoot } from "./LayoutComponents.js";
+import { HeaderLinksRoot } from "./HeaderLinks.styles.js";
 
 const links = content.site.headerLinks ?? [];
 const base = import.meta.env.BASE_URL.replace(/\/$/, "");
@@ -22,7 +22,7 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 
 {
   links.length > 0 && (
-    <HeaderLinksRoot data-tasty-anatomy="HeaderLinks">
+    <HeaderLinksRoot>
       <nav class="td-header-links__desktop" aria-label={ui.headerLinks}>
         {links.map((link) => (
           <a

package/dist/components/HeaderLinks.styles.js

@@ -0,0 +1,149 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const HeaderLinksRoot = defineComponent("HeaderLinks", {
+  as: "cookbook-header-links",
+  "data-element": "HeaderLinks",
+  styles: {
+    display: "flex",
+    flexShrink: "0",
+    order: { "": "0", "@mobile": "2" },
+    "$popover-transition": "120ms",
+    Desktop: {
+      $: ".td-header-links__desktop",
+      display: "flex",
+      hide: { "": false, "@mobile": true },
+      alignItems: "center",
+      gap: "($gap * 0.5)",
+    },
+    Link: {
+      $: "a",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      blockSize: "min $control-height",
+      padding: "$gap ($gap * 1.25)",
+      radius: "$radius",
+      color: "#text-soft",
+      fill: "#clear",
+      preset: "small / strong",
+      textDecoration: "none",
+      whiteSpace: "nowrap",
+    },
+    DesktopLink: {
+      $: ".td-header-links__desktop a",
+      radius: "$header-control-radius",
+      inlinePadding: "($gap * 2)",
+    },
+    HoverLink: {
+      $: "a",
+      color: { "": null, "@own(:hover)": "#text" },
+      fill: { "": null, "@own(:hover)": "#surface-2-hover" },
+    },
+    PrimaryLink: {
+      $: "a",
+      color: {
+        "": null,
+        '@own([data-variant="primary"])': "#accent-surface-text",
+      },
+      fill: { "": null, '@own([data-variant="primary"])': "#accent-surface" },
+    },
+    HoverPrimaryLink: {
+      $: "a",
+      filter: {
+        "": null,
+        '@own([data-variant="primary"] & :hover)': "brightness(1.1)",
+      },
+    },
+    Trigger: {
+      $: ".td-header-links__trigger",
+      display: "grid",
+      hide: { "": true, "@mobile": false },
+      placeItems: "center",
+      inlineSize: "$docs-menu-button-size",
+      blockSize: "$docs-menu-button-size",
+      padding: "0",
+      border: "0",
+      radius: "$header-control-radius",
+      color: "#text-soft",
+      fill: "#clear",
+    },
+    HoverTrigger: {
+      $: ".td-header-links__trigger",
+      color: { "": null, "@own(:hover)": "#text" },
+      fill: { "": null, "@own(:hover)": "#surface-2-hover" },
+    },
+    Panel: {
+      $: ".td-header-links__panel",
+      position: "fixed",
+      inset: "0.5rem $docs-nav-pad-x auto auto",
+      inlineSize: "min(20rem, calc(100vw - 2 * $docs-nav-pad-x))",
+      blockSize: "max (100dvh - 1rem)",
+      overflowY: "auto",
+      margin: "0",
+      padding: "$gap",
+      color: "#text",
+      fill: "#surface",
+      border: true,
+      radius: "$card-radius",
+      shadow: "0 0.75rem 2rem #shadow",
+      opacity: "0",
+      scale: "1 0.96",
+      transformOrigin: "top",
+      transition: {
+        "": "none",
+        "!@reduced-motion":
+          "opacity $popover-transition ease-out, scale $popover-transition ease-out, display $popover-transition allow-discrete, overlay $popover-transition allow-discrete",
+      },
+    },
+    OpenPanel: {
+      $: ".td-header-links__panel",
+      opacity: { "": null, "@own(@popover-open & [data-open])": "1" },
+      scale: { "": null, "@own(@popover-open & [data-open])": "1" },
+    },
+    PanelNavigation: {
+      $: ".td-header-links__panel nav",
+      display: "grid",
+      gap: "1bw",
+    },
+    PanelLink: {
+      $: ".td-header-links__panel a",
+      justifyContent: "flex-start",
+      blockSize: "min $docs-menu-button-size",
+      inlinePadding: "($gap * 1.5)",
+      preset: "navigation",
+      textAlign: "start",
+      whiteSpace: "normal",
+      overflowWrap: "anywhere",
+    },
+    FirstPanelLink: {
+      $: ".td-header-links__panel a",
+      inlinePadding: {
+        "": null,
+        "@own(:is(.td-header-links__panel a:first-child))":
+          "($gap * 1.5) start, ($docs-menu-button-size + $gap) end",
+      },
+    },
+    Close: {
+      $: ".td-header-links__close",
+      position: "absolute",
+      inset: "$gap $gap auto auto",
+      display: "grid",
+      placeItems: "center",
+      inlineSize: "$docs-menu-button-size",
+      blockSize: "$docs-menu-button-size",
+      padding: "0",
+      border: "0",
+      color: "#text-soft",
+      fill: "#clear",
+      radius: "$header-control-radius",
+    },
+    HoverClose: {
+      $: ".td-header-links__close",
+      color: { "": null, "@own(:hover)": "#text" },
+      fill: { "": null, "@own(:hover)": "#surface-2-hover" },
+    },
+  },
+});

package/dist/components/Hero.styles.js

@@ -0,0 +1,129 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const HeroRoot = defineComponent("Hero", {
+  as: "div",
+  "data-element": "Hero",
+  styles: {
+    display: "grid",
+    gridColumns: {
+      "": "minmax(0, 7fr) minmax(12rem, 4fr)",
+      "@mobile": "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",
+    },
+    Visual: {
+      $: "> img, > .hero-html",
+      order: { "": "2", "@mobile": "0" },
+      display: "grid",
+      placeItems: "center",
+      inlineSize: "min(100%, 22rem)",
+      blockSize: "auto",
+      objectFit: "contain",
+      inlineMargin: "auto",
+      color: "#logo-surface",
+    },
+    DarkVisual: {
+      $: "> img",
+      hide: {
+        "": null,
+        '@own([data-hero-image="dark"])': false,
+        '(@own([data-hero-image="dark"])) & (@light)': true,
+      },
+    },
+    LightVisual: {
+      $: "> img",
+      hide: {
+        "": null,
+        '@own([data-hero-image="light"])': true,
+        '(@own([data-hero-image="light"])) & (@light)': false,
+      },
+    },
+    Stack: {
+      $: "> :is(.stack)",
+      display: "flex",
+      flow: "column",
+      alignItems: { "": "flex-start", "@mobile": "center" },
+      gap: "clamp(1.5rem, 3vw, 2rem)",
+      textAlign: { "": "start", "@mobile": "center" },
+    },
+    Copy: {
+      $: "> :is(.stack) > :is(.copy)",
+      display: "flex",
+      flow: "column",
+      alignItems: "inherit",
+      gap: "($gap * 2)",
+    },
+    Title: {
+      $: "h1",
+      inlineSize: "max 16ch",
+      margin: "0",
+      color: "#heading",
+      preset: "hero-title",
+      textWrap: "balance",
+    },
+    Tagline: {
+      $: ":is(.tagline)",
+      inlineSize: "max 48ch",
+      color: "#text-soft",
+      preset: "hero-tagline",
+      textWrap: "balance",
+    },
+    Actions: {
+      $: ":is(.actions)",
+      display: "flex",
+      flow: "row wrap",
+      justifyContent: { "": "flex-start", "@mobile": "center" },
+      gap: "($gap * 1.5)",
+    },
+    Action: {
+      $: ".cookbook-link-button",
+      display: "inline-flex",
+      alignItems: "center",
+      blockSize: "min $control-height",
+      padding: "($gap * 1.25) ($gap * 2.5)",
+      gap: "$gap",
+      color: "#text",
+      border: true,
+      radius: "999px",
+      fill: "#surface-2",
+      preset: "navigation / strong",
+      textDecoration: "none",
+      transition: "fill $transition, translate $transition",
+    },
+    HoverAction: {
+      $: ".cookbook-link-button",
+      fill: { "": null, "@own(:hover)": "#surface-2-hover" },
+      translate: { "": null, "@own(:hover)": "0 -1px" },
+    },
+    PrimaryAction: {
+      $: ".cookbook-link-button.primary",
+      color: "#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",
+    },
+    SecondaryAction: {
+      $: ".cookbook-link-button.secondary",
+      color: "#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",
+    },
+    MinimalAction: {
+      $: ".cookbook-link-button.minimal",
+      inlinePadding: "0",
+      color: "#accent-text",
+      border: "0",
+      fill: "#clear",
+    },
+    ActionIcon: { $: ".cookbook-link-button svg", flexShrink: "0" },
+  },
+});

package/dist/components/LanguageSelect.styles.js

@@ -0,0 +1,169 @@
+import { selectPopoverStyles } from "./select-popover-styles.js";
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+const languageSelectStyles = selectPopoverStyles();
+
+export const LanguageSelectRoot = defineComponent("LanguageSelect", {
+  as: "cookbook-language-select",
+  "data-element": "LanguageSelect",
+  styles: {
+    display: "flex",
+    flexShrink: "0",
+    // Shared selector defaults are resolved once during server-side module evaluation.
+    // eslint-disable-next-line tasty/no-runtime-styles-mutation
+    "$popover-transition": languageSelectStyles["$popover-transition"],
+    Trigger: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.Trigger,
+      inlineSize: "8rem",
+      blockSize: "$control-height",
+      padding: "0 $gap",
+      fill: "#clear",
+      border: "0",
+      transition: "color $transition, fill $transition",
+    },
+    HoverTrigger: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.HoverTrigger,
+    },
+    ActiveTrigger: {
+      $: "> button",
+      color: { "": null, "@own(:active)": "#text" },
+      fill: { "": null, "@own(:active)": "#surface-2-pressed" },
+    },
+    LabelIcon: {
+      $: "> button > .label-icon",
+      display: "block",
+      flexShrink: "0",
+      inlineSize: { "": "1.25rem", "@mobile": "1.125rem" },
+      blockSize: { "": "1.25rem", "@mobile": "1.125rem" },
+    },
+    TriggerLabel: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.TriggerLabel,
+    },
+    Caret: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.Caret,
+    },
+    CompactTrigger: {
+      $: "& > button",
+      inlineSize: { "": null, "[data-compact]": "$docs-menu-button-size" },
+      blockSize: { "": null, "[data-compact]": "$docs-menu-button-size" },
+      padding: { "": null, "[data-compact]": "0" },
+    },
+    CompactLabel: {
+      $: "& > button > .trigger-label",
+      hide: { "": null, "[data-compact]": true },
+    },
+    CompactCaret: {
+      $: "& > button > :is(.caret)",
+      hide: { "": null, "[data-compact]": true },
+    },
+    Label: { $: "> button" },
+    HoverLabel: {
+      // Preserve the conditional scope of this empty legacy customization hook.
+      // eslint-disable-next-line tasty/no-state-in-selector
+      $: "> button:hover",
+    },
+    Select: { $: "> button" },
+    CompactSelect: {
+      // Preserve the conditional scope of this empty legacy customization hook.
+      // eslint-disable-next-line tasty/no-state-in-selector
+      $: "&[data-compact] > button",
+    },
+    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",
+    },
+    SidebarTrigger: {
+      $: "& > button",
+      anchorName: { "": null, "[data-sidebar]": "--language-trigger" },
+    },
+    Panel: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.Panel,
+      blockInset: { "": "4rem start", "@mobile": "3.5rem start" },
+      inlineInset:
+        "max($docs-nav-pad-x, ((100vw - $layout-width) / 2 + $docs-sidebar-pad-x)) end",
+    },
+    SidebarPanel: {
+      $: '& > [data-element="Panel"]',
+      positionAnchor: {
+        "": null,
+        "[data-sidebar]": "--language-trigger",
+      },
+      blockInset: {
+        "": null,
+        "[data-sidebar]": "auto start, anchor(top) end",
+      },
+      blockMargin: { "": null, "[data-sidebar]": "$gap end" },
+      inlineInset: {
+        "": null,
+        "[data-sidebar]": "$gap start, auto end",
+      },
+      inlineSize: {
+        "": null,
+        "[data-sidebar]": "min(20rem, calc(100vw - 4rem))",
+      },
+      blockSize: {
+        "": null,
+        "[data-sidebar]": "max (100dvh - 8rem)",
+      },
+      transformOrigin: {
+        "": null,
+        "[data-sidebar]": "bottom",
+      },
+    },
+    OpenPanel: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.OpenPanel,
+    },
+    PanelTitle: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.PanelTitle,
+    },
+    Options: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.Options,
+    },
+    Option: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.Option,
+    },
+    HoverOption: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.HoverOption,
+    },
+    CurrentOption: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.CurrentOption,
+    },
+    Fallback: { $: ".fallback-label", color: "#text-muted" },
+    Checkmark: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.Checkmark,
+    },
+    SelectedCheckmark: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...languageSelectStyles.SelectedCheckmark,
+    },
+  },
+});

package/dist/components/LastUpdated.astro

@@ -4,7 +4,7 @@ const { lang, lastUpdated } = Astro.locals.cookbookRoute;
 
 {
   lastUpdated && (
-    <p>
+    <p data-element="MetaUpdated">
       {Astro.locals.t("page.lastUpdated")}{" "}
       <time datetime={lastUpdated.toISOString()}>
         {lastUpdated.toLocaleDateString(lang, {

package/dist/components/Logo.astro

@@ -1,5 +1,5 @@
 ---
-import { LogoRoot } from "./LayoutComponents.js";
+import { LogoRoot } from "./Logo.styles.js";
 
 import type { LogoProps as Props } from "./props.js";
 
@@ -10,11 +10,7 @@ const {
 } = Astro.props;
 ---
 
-<LogoRoot
-  className={className}
-  aria-hidden={decorative ? "true" : undefined}
-  data-tasty-anatomy="Logo"
->
+<LogoRoot className={className} aria-hidden={decorative ? "true" : undefined}>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 64 64"
@@ -24,12 +20,12 @@ const {
   >
     <rect width="64" height="64" rx="14" fill="currentColor"></rect>
     <path
-      class="td-logo__mark"
+      data-element="Mark"
       fill="currentColor"
       d="M14.8 16c6.7.2 12.3 2 16.7 5.4v28.4c-4.4-3.1-10-4.7-16.6-4.9a3 3 0 0 1-2.9-3V19a3 3 0 0 1 2.8-3Z"
     ></path>
     <path
-      class="td-logo__mark"
+      data-element="Mark"
       fill="currentColor"
       d="M49.2 16c-6.7.2-12.3 2-16.7 5.4v28.4c4.4-3.1 10-4.7 16.6-4.9a3 3 0 0 0 2.9-3V19a3 3 0 0 0-2.8-3Z"
     ></path>

package/dist/components/Logo.styles.js

@@ -0,0 +1,27 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const LogoRoot = defineComponent("Logo", {
+  as: "span",
+  "data-element": "Logo",
+  styles: {
+    display: "inline-grid",
+    flexGrow: "0",
+    flexShrink: "0",
+    flexBasis: "auto",
+    inlineSize: "4rem",
+    blockSize: "4rem",
+    color: "#logo-surface",
+    Svg: {
+      $: "> svg",
+      display: "block",
+      inlineSize: "100%",
+      blockSize: "100%",
+    },
+    Mark: {
+      color: "#logo-mark",
+    },
+  },
+});

package/dist/components/MainContent.styles.js

@@ -0,0 +1,38 @@
+import { TASTY_SPACING_PROPERTIES } from "../theme/tasty-config.js";
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const MainContentRoot = defineComponent("MainContent", {
+  as: "main",
+  "data-element": "MainContent",
+  styles: {
+    "@property": TASTY_SPACING_PROPERTIES,
+    padding: "0 0 5rem",
+    // Layout spacing is a default; generated Markdown owns prose spacing.
+    ContentSpacing: {
+      $: ":where(.content-panel > .cookbook-container) > * + *",
+      blockMargin: "$margin-block-start $margin-block-end",
+      "$margin-block-start": "($gap * 3)",
+    },
+    Container: {
+      $: ".content-panel > .cookbook-container",
+      inlineMargin: { "": "auto", "@narrow-layout": "0" },
+      inlineSize: "max $content-width",
+    },
+    Panel: {
+      $: ".content-panel",
+      "$padding-block-start": {
+        "": "($gap * 3)",
+        "@own(:nth-of-type(2))": "($gap * 2)",
+      },
+      "$padding-block-end": {
+        "": "($gap * 3)",
+        "@own(:first-of-type)": "($gap * 2)",
+      },
+      blockPadding: "$padding-block-start $padding-block-end",
+      inlinePadding: "$docs-content-pad-x",
+    },
+  },
+});

package/dist/components/MainPane.styles.js

@@ -0,0 +1,19 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const MainPaneRoot = defineComponent("MainPane", {
+  as: "div",
+  "data-element": "MainPane",
+  styles: {
+    order: { "": null, "[data-has-sidebar] & [data-has-toc]": "1" },
+    isolation: "isolate",
+    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]) & (@narrow-layout)": "100%",
+    },
+  },
+});

package/dist/components/MarkdownAlert.styles.js

@@ -0,0 +1,61 @@
+import { useGlobalStyles } from "@tenphi/tasty";
+import { resolveComponentStyles } from "./component-styles.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export function MarkdownAlertStyles() {
+  useGlobalStyles(
+    ".cookbook-alert",
+    resolveComponentStyles("MarkdownAlert", {
+      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",
+      },
+      border: {
+        "": true,
+        ".cookbook-alert--note": "#blue",
+        ".cookbook-alert--tip": "#green",
+        ".cookbook-alert--caution": "#warning",
+        ".cookbook-alert--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",
+      },
+      Title: {
+        $: ".cookbook-alert__title",
+        display: "flex",
+        alignItems: "center",
+        gap: "$gap",
+        "$margin-block-start": "0",
+        "$margin-block-end": "$gap",
+        blockMargin: "$margin-block-start $margin-block-end",
+        inlineMargin: "0",
+        color: "inherit",
+        preset: "strong",
+      },
+      FirstContent: {
+        $: ".cookbook-alert__content > *",
+        blockMargin: {
+          "": null,
+          "@own(:is(.cookbook-alert__content > :first-child))":
+            "$margin-block-start $margin-block-end",
+        },
+        "$margin-block-start": {
+          "": null,
+          "@own(:is(.cookbook-alert__content > :first-child))": "0",
+        },
+      },
+    }),
+  );
+  return null;
+}