@tenphi/renderer 0.21.1 → 0.21.2

package/dist/components/Sidebar.styles.js

@@ -0,0 +1,309 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const SidebarRoot = defineComponent("Sidebar", {
+  as: "cookbook-sidebar-pane",
+  "data-element": "Sidebar",
+  styles: {
+    "$sidebar-transition": "120ms",
+    display: { "@desktop": "block" },
+    visibility: {
+      "": "visible",
+      "@mobile": "hidden",
+      "@popover-open & @mobile": "visible",
+    },
+    position: "fixed",
+    zIndex: { "": "8", "@mobile": "12" },
+    blockInset: { "": "$docs-nav-height start, 0 end", "@mobile": "0" },
+    inlineInset: {
+      "": "0 start, auto end",
+      "@desktop": "max(0px, calc((100% - $layout-width) / 2)) start, auto end",
+    },
+    inlineSize: {
+      "": "$sidebar-width",
+      "@mobile": "min(22rem, calc(100% - 2rem))",
+    },
+    blockSize: "auto",
+    margin: "0",
+    padding: "0",
+    border: "0",
+    color: "#text",
+    overflowY: "auto",
+    scrollbar: "auto stable",
+    fill: "#surface",
+    overscrollBehavior: "contain",
+    shadow: { "": "none", "@mobile": "0.25rem 0 1rem #shadow" },
+    translate: {
+      "": "0",
+      "@mobile": "-100% 0",
+      "@popover-open & [data-open] & @mobile": "0",
+    },
+    transition: {
+      "": "none",
+      "@mobile & !@reduced-motion":
+        "translate $sidebar-transition ease-out, visibility $sidebar-transition, display $sidebar-transition allow-discrete, overlay $sidebar-transition allow-discrete",
+    },
+    Backdrop: {
+      $: "&::backdrop",
+      fill: "#overlay",
+      opacity: "0",
+      transition: {
+        "": "none",
+        "@mobile & !@reduced-motion":
+          "opacity $sidebar-transition ease-out, display $sidebar-transition allow-discrete, overlay $sidebar-transition allow-discrete",
+      },
+    },
+    OpenBackdrop: {
+      $: "&::backdrop",
+      opacity: { "": null, "@popover-open & [data-open]": "1" },
+    },
+    MobileHeading: {
+      $: ".td-sidebar-heading",
+      display: "flex",
+      hide: { "": true, "@mobile": false },
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "$gap",
+    },
+    HomeLink: {
+      display: "flex",
+      alignItems: "center",
+      textDecoration: "none",
+      inlineSize: "min 0",
+      padding: "0",
+      gap: "$gap",
+      color: "#text",
+      preset: "h4",
+    },
+    HomeLogo: {
+      $: 'HomeLink > [data-element="Logo"]',
+      inlineSize: "2rem",
+      blockSize: "2rem",
+    },
+    HomeLabel: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+    },
+    Close: {
+      $: ".td-sidebar-heading > button",
+      display: "grid",
+      placeItems: "center",
+      flexShrink: "0",
+      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-sidebar-heading > button",
+      color: {
+        "": null,
+        "@own(:is(.td-sidebar-heading > button:hover))": "#text",
+      },
+      fill: {
+        "": null,
+        "@own(:is(.td-sidebar-heading > button:hover))": "#surface-2-hover",
+      },
+    },
+    CloseIcon: {
+      $: ".td-sidebar-heading > button > svg",
+      inlineSize: "1.25rem",
+      blockSize: "1.25rem",
+    },
+    CurrentLink: {
+      $: "cookbook-sidebar a",
+      color: {
+        "": null,
+        '@own([aria-current="page"])': "#accent-text",
+      },
+      fill: {
+        "": null,
+        '@own([aria-current="page"])': "#accent-surface-subtle",
+      },
+      preset: {
+        "": null,
+        '@own([aria-current="page"])': "navigation / strong",
+      },
+    },
+    Content: {
+      $: ".sidebar-content",
+      display: "flex",
+      flow: "column",
+      blockSize: "min 100%",
+      inlinePadding: "$docs-sidebar-pad-x",
+      gap: "($gap * 2)",
+      blockPadding: {
+        "": "($gap * 3) start, ($gap * 6) end",
+        "@mobile": "($gap * 2) start, ($gap * 6) end",
+      },
+    },
+    Tree: { $: "cookbook-sidebar", display: "block" },
+    List: {
+      $: "cookbook-sidebar ul",
+      display: "grid",
+      gridColumns: "minmax(0, 1fr)",
+      gap: "1bw",
+      margin: "0",
+      padding: "0",
+      listStyle: "none",
+    },
+    Item: { $: "cookbook-sidebar li", overflowWrap: "anywhere" },
+    TopLevelSpacing: { $: ".top-level > li + li", blockMargin: "0 start" },
+    GroupSpacing: {
+      $: ".top-level > li + li",
+      blockMargin: {
+        "": null,
+        "@own(:is(.top-level > li + li:has(> .sidebar-section-label)))":
+          "($gap * 2.5) start",
+      },
+    },
+    NestedItem: {
+      $: "cookbook-sidebar details > ul > li",
+      inlineMargin: "($gap * 1.5) start",
+    },
+    SectionHeading: {
+      $: ".sidebar-section-label",
+      margin: "0 0 1bw",
+      padding: "($gap * 0.75) ($gap * 1.25)",
+      color: "#text",
+      preset: "small / strong",
+    },
+    Control: {
+      $: "cookbook-sidebar summary, cookbook-sidebar a",
+      blockSize: "min 2.25rem",
+      padding: "($gap * 0.75) ($gap * 1.25)",
+      color: "#sidebar-text",
+      preset: "navigation",
+      radius: "$radius",
+      textDecoration: "none",
+    },
+    Summary: {
+      $: "cookbook-sidebar summary",
+      blockMargin: "1bw end",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "1x",
+      cursor: "pointer",
+      userSelect: "none",
+    },
+    GroupLabel: {
+      $: ".group-label",
+      display: "flex",
+      alignItems: "center",
+      inlineSize: "min 0",
+      gap: "0.25em",
+    },
+    GroupLabelText: {
+      $: ".group-label > span",
+      inlineSize: {
+        "": null,
+        "@own(:is(.group-label > span:first-child))": "min 0",
+      },
+      overflow: {
+        "": null,
+        "@own(:is(.group-label > span:first-child))": "hidden",
+      },
+      textOverflow: {
+        "": null,
+        "@own(:is(.group-label > span:first-child))": "ellipsis",
+      },
+      whiteSpace: {
+        "": null,
+        "@own(:is(.group-label > span:first-child))": "nowrap",
+      },
+    },
+    Link: {
+      $: "cookbook-sidebar a",
+      inlineSize: "0 100% initial",
+      display: "flex",
+      alignItems: "center",
+      gap: "0.25em",
+      fill: "#surface",
+      preset: "navigation",
+    },
+    LinkLabel: {
+      $: "a > span",
+      inlineSize: { "": null, "@own(:is(a > span:first-child))": "min 0" },
+      overflow: { "": null, "@own(:is(a > span:first-child))": "hidden" },
+      textOverflow: { "": null, "@own(:is(a > span:first-child))": "ellipsis" },
+      whiteSpace: { "": null, "@own(:is(a > span:first-child))": "nowrap" },
+    },
+    InteractiveControl: {
+      $: "cookbook-sidebar a, cookbook-sidebar summary",
+      color: {
+        "": null,
+        '@own((:hover | :focus-visible) & ![aria-current="page"])': "#text",
+      },
+      fill: {
+        "": null,
+        '@own((:hover | :focus-visible) & ![aria-current="page"])':
+          "#surface-2-hover",
+      },
+    },
+    SummaryMarker: {
+      $: "cookbook-sidebar summary::marker, summary::-webkit-details-marker",
+      hide: true,
+    },
+    Caret: {
+      $: ".sidebar-caret",
+      flexShrink: "0",
+      inlineSize: "1rem",
+      blockSize: "1rem",
+      // Tasty and browsers support :dir(); the lint rule's pseudo list omits it.
+      // eslint-disable-next-line tasty/valid-state-key
+      transform: { "": "none", ":dir(rtl)": "rotate(180deg)" },
+    },
+    ExpandedCaret: {
+      $: "details > summary > .sidebar-caret, details > summary > a > .sidebar-caret",
+      transform: {
+        "": null,
+        "@own(:is(details[open] > summary > .sidebar-caret)) | @own(:is(details[open] > summary > a > .sidebar-caret))":
+          "rotate(90deg)",
+      },
+    },
+    LinkedSummary: {
+      $: "summary",
+      padding: { "": null, "@own(:has(> a))": "0" },
+    },
+    GroupLink: { $: "summary > a", justifyContent: "space-between" },
+    LinkedSectionHeading: {
+      $: ".sidebar-section-label",
+      padding: { "": null, "@own(:has(> a))": "0" },
+    },
+    SectionLink: {
+      $: ".sidebar-section-label > a",
+      color: {
+        "": null,
+        '@own(:is(.sidebar-section-label > a:not([aria-current="page"])))':
+          "#text",
+      },
+      preset: {
+        "": null,
+        '@own(:is(.sidebar-section-label > a:not([aria-current="page"])))':
+          "small / strong",
+      },
+    },
+    Badge: {
+      $: ".sidebar-badge",
+      flexShrink: "0",
+      padding: "0.125rem 0.375rem",
+      color: "#text-soft",
+      fill: "#surface-3",
+      border: "$border-width solid #border",
+      radius: "$radius",
+      preset: "small",
+    },
+    TopLevelLink: {
+      $: "a.large",
+      color: { "": null, '@own(:not([aria-current="page"]))': "#sidebar-text" },
+      preset: { "": null, '@own(:not([aria-current="page"]))': "navigation" },
+    },
+  },
+});

package/dist/components/SiteLogo.astro

@@ -1,7 +1,7 @@
 ---
 import { content } from "virtual:cookbook/config";
 import Logo from "./Logo.astro";
-import { SiteLogoRoot } from "./LayoutComponents.js";
+import { SiteLogoRoot } from "./SiteLogo.styles.js";
 interface Props {
   class?: string;
 }
@@ -12,7 +12,6 @@ const logo = content.logo;
   logo === false ? null : logo ? (
     <SiteLogoRoot
       className={Astro.props.class}
-      data-tasty-anatomy="SiteLogo"
       aria-hidden={logo.decorative ? "true" : undefined}
     >
       <img

package/dist/components/SiteLogo.styles.js

@@ -0,0 +1,32 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const SiteLogoRoot = defineComponent("SiteLogo", {
+  as: "span",
+  "data-element": "SiteLogo",
+  styles: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    inlineSize: { "": "auto max 12rem", "@mobile": "auto max 30vw" },
+    blockSize: { "": "2rem", "@mobile": "1.75rem" },
+    Image: {
+      $: "> img",
+      display: "block",
+      inlineSize: "auto max 100%",
+      blockSize: "100%",
+      objectFit: "contain",
+    },
+    Light: {
+      $: "> .td-site-logo__light",
+      hide: { "": false, "@dark": true },
+    },
+    Dark: {
+      $: "> .td-site-logo__dark",
+      hide: { "": true, "@dark": false },
+    },
+  },
+});

package/dist/components/SiteTitle.astro

@@ -2,6 +2,6 @@
 const { siteTitle, siteTitleHref } = Astro.locals.cookbookRoute;
 ---
 
-<a href={siteTitleHref} class="site-title"
+<a href={siteTitleHref} data-element="SiteTitle" class="site-title"
   ><span translate="no">{siteTitle}</span></a
 >

package/dist/components/SkipLink.styles.js

@@ -0,0 +1,24 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const SkipLinkRoot = defineComponent("SkipLink", {
+  as: "a",
+  "data-element": "SkipLink",
+  styles: {
+    zIndex: { "": null, ":focus": "20" },
+    color: { "": null, ":focus": "#accent-surface-text" },
+    fill: { "": null, ":focus": "#accent-surface" },
+    radius: { "": null, ":focus": "$radius" },
+    shadow: { "": null, ":focus": "0 1rem 3rem #shadow" },
+    textDecoration: { "": null, ":focus": "none" },
+    position: "fixed",
+    inset: "($gap * 1.5) auto auto ($gap * 1.5)",
+    inlineSize: { "": "1px", ":focus": "auto" },
+    blockSize: { "": "1px", ":focus": "auto" },
+    padding: { "": "0", ":focus": "$gap ($gap * 2)" },
+    overflow: { "": "hidden", ":focus": "visible" },
+    clip: { "": "rect(0, 0, 0, 0)", ":focus": "auto" },
+  },
+});

package/dist/components/SocialIcons.styles.js

@@ -0,0 +1,36 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const SocialIconsRoot = defineComponent("SocialIcons", {
+  as: "div",
+  "data-element": "SocialIcons",
+  styles: {
+    display: "flex",
+    alignItems: "center",
+    gap: "($gap * 0.5)",
+    Link: {
+      $: "a",
+      display: "grid",
+      placeItems: "center",
+      inlineSize: "$control-height",
+      blockSize: "$control-height",
+      color: "#text-soft",
+      fill: "#clear",
+      radius: "$header-control-radius",
+      textDecoration: "none",
+    },
+    HoverLink: {
+      $: "a",
+      color: { "": null, "@own(:hover)": "#text" },
+      fill: { "": null, "@own(:hover)": "#surface-2-hover" },
+    },
+    Icon: {
+      $: "a > svg",
+      display: "block",
+      inlineSize: "1.25rem",
+      blockSize: "1.25rem",
+    },
+  },
+});

package/dist/components/Steps.astro

@@ -1,6 +1,6 @@
 ---
 import type { StepsProps as Props } from "./props.js";
-import { StepsRoot } from "./TastyComponents.js";
+import { StepsRoot } from "./Steps.styles.js";
 ---
 
-<StepsRoot className="td-steps" data-tasty-anatomy="Steps"><slot /></StepsRoot>
+<StepsRoot className="td-steps"><slot /></StepsRoot>

package/dist/components/Steps.styles.js

@@ -0,0 +1,25 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const StepsRoot = defineComponent("Steps", {
+  as: "ol",
+  "data-element": "Steps",
+  styles: {
+    display: "grid",
+    gap: "2x",
+    padding: "4x left",
+    border: "1bw left #border",
+
+    Item: {
+      $: "> li",
+      padding: "1x left",
+    },
+    Marker: {
+      $: "> li::marker",
+      color: "#accent-text",
+      preset: "strong",
+    },
+  },
+});

package/dist/components/SyntaxHighlight.styles.js

@@ -0,0 +1,87 @@
+import { useGlobalStyles } from "@tenphi/tasty";
+import { resolveComponentStyles } from "./component-styles.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export function SyntaxHighlightStyles() {
+  useGlobalStyles(
+    // State conditions add no specificity; preserve the former root category weight.
+    ".tasty-code.tasty-code",
+    resolveComponentStyles("SyntaxHighlight", {
+      color: {
+        "": null,
+        ".td-syntax-comment": "#syntax-comment",
+        ".td-syntax-punctuation": "#syntax-punctuation",
+        ".td-syntax-keyword": "#syntax-keyword",
+        ".td-syntax-string": "#syntax-string",
+        ".td-syntax-token": "#syntax-token",
+        ".td-syntax-property": "#syntax-property",
+        ".td-syntax-number": "#syntax-number",
+        ".td-syntax-function": "#syntax-function",
+        ".td-syntax-value": "#syntax-value",
+        ".td-syntax-operator": "#syntax-operator",
+        ".td-syntax-text": "#syntax-text",
+        ".td-green-text": "#green-text",
+        ".td-red-text": "#red-text",
+      },
+      fill: { "": null, ".td-syntax-bg": "#syntax-bg" },
+      overflowX: { "": null, ".td-syntax-scroll": "auto" },
+      whiteSpace: { "": null, ".td-syntax-wrap": "pre-wrap" },
+      overflowWrap: { "": null, ".td-syntax-wrap": "break-word" },
+      // Descendant identities stay neutral so these rules retain their original weight.
+      Marker: { $: ":where(.td-syntax-marker)", userSelect: "none" },
+      Comment: {
+        $: ":where(.td-syntax-comment)",
+        color: "#syntax-comment",
+      },
+      Punctuation: {
+        $: ":where(.td-syntax-punctuation)",
+        color: "#syntax-punctuation",
+      },
+      Keyword: {
+        $: ":where(.td-syntax-keyword)",
+        color: "#syntax-keyword",
+      },
+      String: {
+        $: ":where(.td-syntax-string)",
+        color: "#syntax-string",
+      },
+      Token: {
+        $: ":where(.td-syntax-token)",
+        color: "#syntax-token",
+      },
+      Property: {
+        $: ":where(.td-syntax-property)",
+        color: "#syntax-property",
+      },
+      Number: {
+        $: ":where(.td-syntax-number)",
+        color: "#syntax-number",
+      },
+      Function: {
+        $: ":where(.td-syntax-function)",
+        color: "#syntax-function",
+      },
+      Value: {
+        $: ":where(.td-syntax-value)",
+        color: "#syntax-value",
+      },
+      Operator: {
+        $: ":where(.td-syntax-operator)",
+        color: "#syntax-operator",
+      },
+      Text: { $: ":where(.td-syntax-text)", color: "#syntax-text" },
+      Bg: { $: ":where(.td-syntax-bg)", fill: "#syntax-bg" },
+      Inserted: { $: ":where(.td-green-text)", color: "#green-text" },
+      Deleted: { $: ":where(.td-red-text)", color: "#red-text" },
+      Italic: { $: ":where(.td-syntax-italic)", preset: "italic" },
+      Strong: { $: ":where(.td-syntax-strong)", preset: "strong" },
+      Underline: {
+        $: ":where(.td-syntax-underline)",
+        textDecoration: "underline",
+      },
+    }),
+  );
+  return null;
+}

package/dist/components/Tab.astro

@@ -1,5 +1,5 @@
 ---
-import { TabRoot } from "./TastyComponents.js";
+import { TabRoot } from "./Tab.styles.js";
 import type { TabProps as Props } from "./props.js";
 const { label } = Astro.props;
 ---

package/dist/components/Tab.styles.js

@@ -0,0 +1,30 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const TabRoot = defineComponent("Tab", {
+  as: "section",
+  "data-element": "Tab",
+  styles: {
+    hide: { "": null, "[hidden]": true },
+
+    "$margin-block-start": "0",
+    "$margin-block-end": "0",
+    blockMargin: "$margin-block-start $margin-block-end",
+    inlineMargin: "0",
+    padding: "2x",
+    Heading: {
+      "$margin-block-start": "0",
+      "$margin-block-end": "1x",
+      blockMargin: "$margin-block-start $margin-block-end",
+      inlineMargin: "0",
+      preset: "h3",
+    },
+    HiddenHeading: {
+      $: "> *",
+      hide: { "": null, "@own([data-tab-heading] & [hidden])": true },
+    },
+  },
+  elements: { Heading: "h3" },
+});

package/dist/components/TableOfContents.styles.js

@@ -0,0 +1,62 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const TableOfContentsRoot = defineComponent("TableOfContents", {
+  as: "cookbook-table-of-contents",
+  "data-element": "TableOfContents",
+  styles: {
+    display: "block",
+    hide: { "": false, "@narrow-layout": true },
+    blockPadding: "($gap * 4) start",
+    inlinePadding: "$docs-sidebar-pad-x",
+    Heading: {
+      $: "h2",
+      margin: "0 0 $gap",
+      color: "#text",
+      preset: "small / strong",
+    },
+    List: {
+      $: "ul",
+      display: "grid",
+      gridColumns: "minmax(0, 1fr)",
+      inlineSize: "min 0",
+      gap: "1px",
+      margin: "0",
+      padding: "0",
+      listStyle: "none",
+    },
+    Item: {
+      $: "li",
+      inlineSize: "min 0",
+      margin: "0",
+      padding: "0",
+      listStyle: "none",
+    },
+    Link: {
+      $: "a",
+      display: "block",
+      inlineSize: "0 auto 100%",
+      blockPadding: "($gap * 0.5)",
+      color: "#text-muted",
+      preset: "small",
+      textDecoration: "none",
+      overflowWrap: "anywhere",
+    },
+    LinkLabel: {
+      $: "a > span",
+      display: "block",
+      inlineSize: "min 0",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+    },
+    HoverLink: { $: "a", color: { "": null, "@own(:hover)": "#text" } },
+    CurrentLink: {
+      $: "a",
+      color: { "": null, '@own([aria-current="location"])': "#accent-text" },
+      preset: { "": null, '@own([aria-current="location"])': "small / strong" },
+    },
+  },
+});