@tenphi/renderer 0.21.1 → 0.21.4

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,
+});

package/dist/components/Search.styles.js

@@ -0,0 +1,132 @@
+import closeIcon from "../icons/close.svg?raw";
+import { svgIconUrl } from "./svg-icon.js";
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const SearchRoot = defineComponent("Search", {
+  as: "site-search",
+  "data-element": "Search",
+  styles: {
+    display: "contents",
+    "$dialog-transition": "120ms",
+    Status: {
+      $: "Status",
+      margin: "auto",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      preset: "body",
+    },
+    Dialog: {
+      $: "dialog",
+      radius: { "": "$card-radius", "@mobile": "0" },
+      inlineSize: { "": "0 90% 40rem", "@mobile": "100%" },
+      blockSize: {
+        "": "15rem max-content (100% - 8rem)",
+        "@mobile": "100% 100% 100%",
+      },
+      margin: { "": "4rem auto auto", "@mobile": "0" },
+      padding: "0",
+      color: "#text",
+      border: true,
+      fill: "#surface",
+      shadow: "0 1rem 3rem #shadow",
+      opacity: "0",
+      scale: { "": "0.98", "@mobile": "1" },
+      transition: {
+        "": "none",
+        "!@reduced-motion":
+          "opacity $dialog-transition ease-out, scale $dialog-transition ease-out, display $dialog-transition allow-discrete, overlay $dialog-transition allow-discrete",
+      },
+    },
+    CloseIcon: {
+      $: 'button[data-element="Close"]::before',
+      content: '""',
+      display: "block",
+      flexGrow: "0",
+      flexShrink: "0",
+      flexBasis: "auto",
+      inlineSize: "1rem",
+      blockSize: "1rem",
+      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(closeIcon)}") center / contain no-repeat`,
+    },
+    OpenDialog: { $: "dialog", display: { "": "", "@own([open])": "flex" } },
+    EnteredDialog: {
+      $: "dialog",
+      opacity: { "": null, "@own([open] & [data-open])": "1" },
+      scale: { "": null, "@own([open] & [data-open])": "1" },
+    },
+    Backdrop: {
+      $: "dialog::backdrop",
+      fill: { "": "#overlay", "@mobile": "#clear" },
+      backdropFilter: { "": "blur(0.25rem)", "@mobile": "none" },
+      opacity: "0",
+      transition: {
+        "": "none",
+        "!@reduced-motion & !@mobile":
+          "opacity $dialog-transition ease-out, display $dialog-transition allow-discrete, overlay $dialog-transition allow-discrete",
+      },
+    },
+    EnteredBackdrop: {
+      // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
+      // eslint-disable-next-line tasty/no-state-in-selector
+      $: "dialog[open][data-open]::backdrop",
+      opacity: { "": "1", "@mobile": "0" },
+    },
+    Frame: {
+      $: ".dialog-frame",
+      display: "flex",
+      flow: "column",
+      flexGrow: "1",
+      blockSize: "min 0",
+      gap: "($gap * 2)",
+      padding: { "": "($gap * 3)", "@mobile": "($gap * 2) ($gap * 2) 0" },
+      overflow: "hidden",
+    },
+    Container: {
+      $: ".search-container",
+      display: "flex",
+      flow: "column",
+      flexGrow: "1",
+      inlineSize: "100%",
+      blockSize: "min 0",
+    },
+    Close: {
+      $: 'button[data-element="Close"]',
+      display: { "": "none", "@mobile": "grid" },
+      placeItems: "center",
+      alignSelf: "flex-end",
+      flexShrink: "0",
+      inlineSize: "$docs-menu-button-size",
+      blockSize: "$docs-menu-button-size $docs-menu-button-size initial",
+      padding: "0",
+      color: "#text-soft",
+      border: "0",
+      radius: "$header-control-radius",
+      fill: "#clear",
+      shadow: "none",
+      cursor: "pointer",
+      transition: "color $transition, background-color $transition",
+    },
+    HoverClose: {
+      $: 'button[data-element="Close"]',
+      color: { "": null, "@own(:hover)": "#text" },
+      fill: {
+        "": null,
+        "@own(:hover)": "#surface-2-hover",
+      },
+    },
+    ActiveClose: {
+      $: 'button[data-element="Close"]',
+      color: { "": null, "@own(:active)": "#text" },
+      fill: {
+        "": null,
+        "@own(:active)": "#surface-2-pressed",
+      },
+    },
+  },
+});

package/dist/components/SearchButton.styles.js

@@ -0,0 +1,68 @@
+import searchIcon from "../icons/search.svg?raw";
+import { svgIconUrl } from "./svg-icon.js";
+import { configureCookbookStates } from "./tasty-states.js";
+import { extendComponent } from "../define-component.js";
+import { Button } from "./Button.styles.js";
+
+configureCookbookStates();
+
+export const SearchButtonRoot = extendComponent("SearchButton", Button, {
+  "data-element": "SearchButton",
+  styles: {
+    color: { ":hover": "#text", ":active": "#text" },
+    justifyContent: { "": "flex-start", "@mobile": "center" },
+    inlineSize: {
+      "": "initial 100% 22rem",
+      "@mobile": "initial $docs-menu-button-size 22rem",
+    },
+    inlineMargin: {
+      "": "0 start",
+      "@media(w >= 80rem)": "min(5rem, max(0px, calc(100% - 22rem))) start",
+    },
+    blockSize: {
+      "": "0 $control-height initial",
+      "@mobile": "0 $docs-menu-button-size initial",
+    },
+    padding: { "": "0 $gap 0 ($gap * 1.5)", "@mobile": "0" },
+    border: { "": true, "@mobile": "0" },
+    radius: "$header-control-radius",
+    fill: {
+      "": "#surface",
+      "@mobile": "#clear",
+      ":hover": "#surface-2-hover",
+      ":active": "#surface-2-pressed",
+    },
+    preset: "small",
+    shadow: "none",
+    transition: "color $transition, fill $transition",
+    Label: { $: "> span", hide: { "": false, "@mobile": true } },
+    PendingShortcut: {
+      $: "> kbd",
+      visibility: { "": null, "@own([data-pending])": "hidden" },
+    },
+    Shortcut: {
+      $: "> kbd",
+      display: "flex",
+      hide: { "": false, "@narrow-layout": true },
+      gap: "0.25em",
+      inlineMargin: "auto start",
+      inlinePadding: "0.375rem",
+      fill: "#surface-3",
+      preset: "small",
+      radius: "($radius * 0.75)",
+    },
+    NativeIcon: { $: "> svg", hide: true },
+    Icon: {
+      $: "&::before",
+      content: '""',
+      display: "block",
+      flexShrink: "0",
+      inlineSize: { "": "1rem", "@mobile": "1.25rem" },
+      blockSize: { "": "1rem", "@mobile": "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(searchIcon)}") center / contain no-repeat`,
+    },
+  },
+});

package/dist/components/SearchResults.styles.js

@@ -0,0 +1,200 @@
+import closeIcon from "../icons/close.svg?raw";
+import searchIcon from "../icons/search.svg?raw";
+import { svgIconUrl } from "./svg-icon.js";
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const SearchResultsRoot = defineComponent("SearchResults", {
+  as: "div",
+  "data-element": "SearchResults",
+  styles: {
+    display: "flex",
+    flow: "column",
+    flexGrow: "1",
+    blockSize: "min 0",
+    "$pagefind-ui-primary": "#accent-text",
+    "$pagefind-ui-text": "#text-soft",
+    "$pagefind-ui-background": "#surface",
+    "$pagefind-ui-border": "#border",
+    "$pagefind-ui-border-width": "$border-width",
+    "$pagefind-ui-tag": "#surface-3",
+    preset: "body",
+    UI: {
+      $: ".pagefind-ui, *",
+      display: {
+        "": "",
+        "@own(:is(.pagefind-ui)) | @own(:is([data-search-results]))": "flex",
+      },
+      flow: {
+        "": null,
+        "@own(:is(.pagefind-ui)) | @own(:is([data-search-results]))": "column",
+      },
+      flexGrow: {
+        "": null,
+        "@own(:is(.pagefind-ui)) | @own(:is([data-search-results]))": "1",
+      },
+      blockSize: {
+        "": null,
+        "@own(:is(.pagefind-ui)) | @own(:is([data-search-results]))": "min 0",
+      },
+    },
+    Form: {
+      $: ".pagefind-ui__form",
+      position: "relative",
+      display: "flex",
+      flow: "column",
+      flexGrow: "1",
+      blockSize: "min 0",
+    },
+    Field: {
+      $: ".cookbook-search-field",
+      position: "relative",
+      flexShrink: "0",
+    },
+    EngineControls: {
+      $: ".pagefind-ui__search-input, .pagefind-ui__search-clear",
+      display: "none",
+    },
+    Drawer: {
+      $: ".pagefind-ui__drawer",
+      display: "flex",
+      flow: "column",
+      flexGrow: "1",
+      blockSize: "min 0",
+    },
+    Input: {
+      $: ".cookbook-search-input",
+      flexShrink: "0",
+      inlineSize: "100%",
+      blockSize: "min 3rem",
+      inlinePadding: "2.75rem",
+      color: "#text",
+      border: "$border-width solid #border",
+      radius: "$radius",
+      fill: "#surface",
+      shadow: "none",
+    },
+    Clear: {
+      $: ".cookbook-search-clear",
+      position: "absolute",
+      blockInset: "0 start",
+      inlineInset: "0 end",
+      inlineSize: "3rem",
+      blockSize: "3rem",
+      padding: "0",
+      color: "#text-soft",
+      border: "0",
+      fill: "#clear",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+    },
+    Results: {
+      $: ".pagefind-ui__results-area",
+      flexGrow: "1",
+      blockSize: "min 0",
+      overflowY: "auto",
+      blockMargin: { "": "($gap * 3) start", "@mobile": "($gap * 2) start" },
+      blockBorder: "$border-width solid #border start",
+      inlineSize: { "@mobile": "(100% + ($gap * 4))" },
+      inlineMargin: { "@mobile": "(-1 * $gap * 2)" },
+      inlinePadding: { "@mobile": "($gap * 2)" },
+      blockPadding: { "@mobile": "($gap * 2) end" },
+    },
+    Result: {
+      $: ".pagefind-ui__result",
+      blockPadding: "($gap * 2)",
+      blockBorder: "$border-width solid #border start",
+    },
+    ResultLink: {
+      $: ".pagefind-ui__result-link",
+      color: "#text",
+      preset: "strong",
+    },
+    Message: {
+      $: ".pagefind-ui__message",
+      color: "#text-soft",
+      preset: "small",
+    },
+    List: {
+      $: ".pagefind-ui__results",
+      margin: "0",
+      padding: "0",
+      listStyle: "none",
+    },
+    Title: {
+      $: ".pagefind-ui__result-title",
+      margin: "0",
+      preset: "body / strong",
+    },
+    Excerpt: {
+      $: ".pagefind-ui__result-excerpt",
+      margin: "$gap 0 0",
+      color: "#text-soft",
+      preset: "small",
+    },
+    NestedResult: {
+      $: ".pagefind-ui__result-nested",
+      margin: "2x 0 0",
+      inlinePadding: "2x start",
+      inlineBorder: "1bw solid #border start",
+    },
+    Match: {
+      $: "mark",
+      color: "#accent-surface-text",
+      fill: "#accent-surface",
+      preset: "strong",
+      radius: "0.2em",
+    },
+    More: {
+      $: ".pagefind-ui__button",
+      display: { "@mobile": "block" },
+      inlineSize: { "@mobile": "max-content" },
+      inlineMargin: { "@mobile": "auto start" },
+      padding: "1x 2x",
+      border: "$border-width solid #border",
+      radius: "$radius",
+      color: "#text",
+      fill: "#surface-2",
+      preset: "navigation",
+    },
+    HoverMore: {
+      $: ".pagefind-ui__button",
+      fill: { "": null, "@own(:hover)": "#surface-2-hover" },
+    },
+    SearchIcon: {
+      $: ".cookbook-search-field::before",
+      content: '""',
+      position: "absolute",
+      zIndex: "1",
+      blockInset: "1rem start",
+      inlineInset: "1rem start",
+      display: "block",
+      inlineSize: "1rem",
+      blockSize: "1rem",
+      fill: "#text-soft",
+      // 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(searchIcon)}") center / contain no-repeat`,
+      pointerEvents: "none",
+    },
+    ClearIcon: {
+      $: ".cookbook-search-clear::before",
+      content: '""',
+      display: "block",
+      inlineSize: "1rem",
+      blockSize: "1rem",
+      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(closeIcon)}") center / 1rem no-repeat`,
+    },
+    SuppressedClear: {
+      $: ".cookbook-search-clear",
+      display: { "": "", "@own([hidden])": "none" },
+    },
+  },
+});

package/dist/components/SelectPopover.astro

@@ -33,6 +33,7 @@ const id = `select-${crypto.randomUUID()}`;
 </button>
 <div
   id={id}
+  data-element="Panel"
   popover="auto"
   role="group"
   aria-label={title}