@tenphi/renderer 0.21.1 → 0.21.2

package/dist/component-styles-DstqPFf3.js

@@ -0,0 +1,21 @@
+import { mergeStyles } from "@tenphi/tasty/core";
+//#region src/components/component-styles.ts
+const sharedConfiguration = globalThis;
+function configureComponentStyles(styles) {
+	sharedConfiguration.__tenphiCookbookComponentStyles = styles ?? {};
+	sharedConfiguration.__tenphiCookbookUsedComponentStyles = /* @__PURE__ */ new Set();
+}
+/** Merge a partial theme override into a built-in or consumer style tree. */
+function resolveComponentStyles(name, baseStyles) {
+	sharedConfiguration.__tenphiCookbookUsedComponentStyles?.add(name);
+	const configuredStyles = sharedConfiguration.__tenphiCookbookComponentStyles?.[name];
+	return configuredStyles ? mergeStyles(baseStyles, configuredStyles) : baseStyles;
+}
+/** Find custom names without a component style resolver match. */
+function unusedCustomStyleNames(styles) {
+	return Object.keys(styles ?? {}).filter((name) => !sharedConfiguration.__tenphiCookbookUsedComponentStyles?.has(name));
+}
+//#endregion
+export { resolveComponentStyles as n, unusedCustomStyleNames as r, configureComponentStyles as t };
+
+//# sourceMappingURL=component-styles-DstqPFf3.js.map

package/dist/component-styles-DstqPFf3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-styles-DstqPFf3.js","names":[],"sources":["../src/components/component-styles.ts"],"sourcesContent":["import { mergeStyles, type Styles } from \"@tenphi/tasty/core\";\n\n// Astro can load the integration and renderer through separate module graphs.\n// Keep their component configuration on the shared process global.\nconst sharedConfiguration = globalThis as typeof globalThis & {\n  __tenphiCookbookComponentStyles?: Record<string, Styles | undefined>;\n  __tenphiCookbookUsedComponentStyles?: Set<string>;\n};\n\nexport function configureComponentStyles(\n  styles: Record<string, Styles | undefined> | undefined,\n): void {\n  sharedConfiguration.__tenphiCookbookComponentStyles = styles ?? {};\n  sharedConfiguration.__tenphiCookbookUsedComponentStyles = new Set();\n}\n\n/** Merge a partial theme override into a built-in or consumer style tree. */\nexport function resolveComponentStyles(\n  name: string,\n  baseStyles: Styles,\n): Styles {\n  sharedConfiguration.__tenphiCookbookUsedComponentStyles?.add(name);\n  const configuredStyles = sharedConfiguration\n    .__tenphiCookbookComponentStyles?.[name] as Styles | undefined;\n  return configuredStyles\n    ? mergeStyles(baseStyles, configuredStyles as Styles)\n    : baseStyles;\n}\n\n/** Find custom names without a component style resolver match. */\nexport function unusedCustomStyleNames(\n  styles: Record<string, Styles> | undefined,\n): string[] {\n  return Object.keys(styles ?? {}).filter(\n    (name) =>\n      !sharedConfiguration.__tenphiCookbookUsedComponentStyles?.has(name),\n  );\n}\n"],"mappings":";;AAIA,MAAM,sBAAsB;AAK5B,SAAgB,yBACd,QACM;CACN,oBAAoB,kCAAkC,UAAU,CAAC;CACjE,oBAAoB,sDAAsC,IAAI,IAAI;AACpE;;AAGA,SAAgB,uBACd,MACA,YACQ;CACR,oBAAoB,qCAAqC,IAAI,IAAI;CACjE,MAAM,mBAAmB,oBACtB,kCAAkC;CACrC,OAAO,mBACH,YAAY,YAAY,gBAA0B,IAClD;AACN;;AAGA,SAAgB,uBACd,QACU;CACV,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,QAC9B,SACC,CAAC,oBAAoB,qCAAqC,IAAI,IAAI,CACtE;AACF"}

package/dist/components/Banner.styles.js

@@ -0,0 +1,19 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const BannerRoot = defineComponent("Banner", {
+  as: "div",
+  "data-element": "Banner",
+  styles: {
+    padding: "($gap * 1.5) $docs-nav-pad-x",
+    color: "#accent-surface-text",
+    fill: "#accent-surface",
+    preset: "body / strong",
+    textAlign: "center",
+    textWrap: "balance",
+    shadow: "none",
+    Link: { $: "a", color: "#accent-surface-text" },
+  },
+});

package/dist/components/Button.styles.d.ts

@@ -0,0 +1,9 @@
+import type { TastyPolymorphicComponent } from "@tenphi/tasty";
+
+export const Button: TastyPolymorphicComponent<
+  "button",
+  readonly never[],
+  Record<string, never>,
+  readonly never[],
+  readonly never[]
+>;

package/dist/components/Button.styles.js

@@ -0,0 +1,14 @@
+import { defineComponent } from "../define-component.js";
+
+/** Shared button foundation; descendants own their layout and interaction anatomy. */
+export const Button = defineComponent("Button", {
+  as: "button",
+  styles: {
+    display: "flex",
+    alignItems: "center",
+    gap: "$gap",
+    blockSize: "min 0",
+    color: "#text-soft",
+    cursor: "pointer",
+  },
+});

package/dist/components/Callout.astro

@@ -1,5 +1,5 @@
 ---
-import { CalloutRoot } from "./TastyComponents.js";
+import { CalloutRoot } from "./Callout.styles.js";
 import type { CalloutProps as Props } from "./props.js";
 const {
   kind = "note",

package/dist/components/Callout.styles.js

@@ -0,0 +1,54 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const CalloutRoot = defineComponent("Callout", {
+  as: "aside",
+  "data-element": "Callout",
+  styles: {
+    "#callout-border": {
+      "": "#info",
+      '[data-kind="tip"]': "#success",
+      '[data-kind="caution"]': "#warning",
+      '[data-kind="danger"]': "#danger",
+    },
+    "#callout-text": {
+      "": "#info-text",
+      '[data-kind="tip"]': "#success-text",
+      '[data-kind="caution"]': "#warning-text",
+      '[data-kind="danger"]': "#danger-text",
+    },
+    "#callout-surface": {
+      "": "#info-surface",
+      '[data-kind="tip"]': "#success-surface",
+      '[data-kind="caution"]': "#warning-surface",
+      '[data-kind="danger"]': "#danger-surface",
+    },
+    "$margin-block-start": "2x",
+    "$margin-block-end": "2x",
+    blockMargin: "$margin-block-start $margin-block-end",
+    inlineMargin: "0",
+    padding: "2x 3x",
+    border: "1bw #callout-border",
+    radius: "1cr",
+    fill: "#callout-surface",
+    color: "#text",
+    Title: {
+      preset: "body / strong",
+      color: "#callout-text",
+      "$margin-block-start": "0",
+      "$margin-block-end": "1x",
+      blockMargin: "$margin-block-start $margin-block-end",
+      inlineMargin: "0",
+    },
+    Body: {
+      color: "#text",
+      "$margin-block-start": "0",
+      "$margin-block-end": "0",
+      blockMargin: "$margin-block-start $margin-block-end",
+      inlineMargin: "0",
+    },
+  },
+  elements: { Title: "p", Body: "div" },
+});

package/dist/components/Card.astro

@@ -1,5 +1,5 @@
 ---
-import { CardLink, CardRoot } from "./TastyComponents.js";
+import { CardLink, CardRoot } from "./Card.styles.js";
 
 import type { CardProps as Props } from "./props.js";
 
@@ -7,7 +7,7 @@ const { title, href } = Astro.props;
 const Root = href ? CardLink : CardRoot;
 ---
 
-<Root className="td-card" href={href} data-tasty-anatomy="Card">
-  {title && <h3 data-tasty-anatomy="CardTitle">{title}</h3>}
-  <div data-tasty-anatomy="CardBody"><slot /></div>
+<Root className="td-card" href={href}>
+  {title && <h3>{title}</h3>}
+  <div><slot /></div>
 </Root>

package/dist/components/Card.styles.js

@@ -0,0 +1,64 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { tasty } from "@tenphi/tasty";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const CardRoot = defineComponent("Card", {
+  as: "article",
+  "data-element": "Card",
+  styles: {
+    display: "grid",
+    gap: "1.5x",
+    padding: "2.5x",
+    color: "#text",
+    textDecoration: "none",
+    border: true,
+    radius: "1cr",
+    fill: "#surface-2",
+    shadow: "0 1px 2px #shadow",
+    transition: "fill $transition, shadow $transition, translate $transition",
+
+    Heading2: {
+      $: "h2",
+      "$margin-block-start": "0",
+      "$margin-block-end": "0",
+      blockMargin: "$margin-block-start $margin-block-end",
+      inlineMargin: "0",
+    },
+    Heading3: {
+      $: "h3",
+      "$margin-block-start": "0",
+      "$margin-block-end": "0",
+      blockMargin: "$margin-block-start $margin-block-end",
+      inlineMargin: "0",
+    },
+    Paragraph: {
+      $: "p",
+      "$margin-block-start": "0",
+      "$margin-block-end": "0",
+      blockMargin: "$margin-block-start $margin-block-end",
+      inlineMargin: "0",
+    },
+  },
+});
+
+export const CardLink = tasty(CardRoot, {
+  as: "a",
+  styles: {
+    fill: {
+      "": "#surface-2",
+      ":hover": "#surface-2-hover",
+      ":active": "#surface-2-pressed",
+    },
+    shadow: {
+      "": "0 1px 2px #shadow",
+      ":hover": "0 .75x 2x #shadow",
+    },
+    translate: {
+      "": "0",
+      ":hover": "0 -1px",
+      ":active": "0",
+    },
+  },
+});

package/dist/components/CodeGroup.astro

@@ -2,14 +2,18 @@
 import { Code } from "astro:components";
 import Tabs from "./Tabs.astro";
 import Tab from "./Tab.astro";
-import { CodeGroupRoot } from "./TastyComponents.js";
+import { CodeGroupRoot } from "./CodeGroup.styles.js";
+import { MarkdownCodeBlockStyles } from "./MarkdownCodeBlock.styles.js";
+import { SyntaxHighlightStyles } from "./SyntaxHighlight.styles.js";
 import { codeGroupHighlighting } from "../theme/shiki-theme.js";
 import type { CodeGroupProps as Props } from "./props.js";
 const { label = "Code examples", items } = Astro.props;
 const highlight = codeGroupHighlighting();
 ---
 
-<CodeGroupRoot data-tasty-anatomy="CodeGroup">
+<MarkdownCodeBlockStyles />
+<SyntaxHighlightStyles />
+<CodeGroupRoot>
   <Tabs label={label}>
     {
       items.map((item) => (
@@ -19,7 +23,7 @@ const highlight = codeGroupHighlighting();
           )}
           <cookbook-code-block
             class="td-code-block"
-            data-tasty-anatomy="MarkdownCodeBlock"
+            data-element="MarkdownCodeBlock"
           >
             <Code
               code={item.code}
@@ -30,11 +34,12 @@ const highlight = codeGroupHighlighting();
             />
             <button
               type="button"
+              data-element="CopyButton"
               data-copy-code
               aria-label="Copy code"
               title="Copy code"
             >
-              <span data-copy-icon aria-hidden="true" />
+              <span data-element="CopyIcon" data-copy-icon aria-hidden="true" />
             </button>
           </cookbook-code-block>
         </Tab>

package/dist/components/CodeGroup.styles.js

@@ -0,0 +1,27 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const CodeGroupRoot = defineComponent("CodeGroup", {
+  as: "div",
+  "data-element": "CodeGroup",
+  styles: {
+    Caption: {
+      preset: "small",
+      color: "#text-soft",
+      "$margin-block-start": "0",
+      "$margin-block-end": "1x",
+      blockMargin: "$margin-block-start $margin-block-end",
+      inlineMargin: "0",
+    },
+    Pre: { $: "pre" },
+    Code: {
+      $: "pre code",
+      preset: "code",
+      color: "#syntax-text",
+      whiteSpace: "pre",
+    },
+  },
+  elements: { Caption: "p", Pre: "pre", Code: "code" },
+});

package/dist/components/Document.styles.js

@@ -0,0 +1,230 @@
+import { useFontFace, useGlobalStyles } from "@tenphi/tasty";
+import jetBrainsMonoLatin from "@fontsource-variable/jetbrains-mono/files/jetbrains-mono-latin-wght-normal.woff2?url";
+import onestLatin from "@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url";
+import { resolveComponentStyles } from "./component-styles.js";
+import { configureCookbookStates } from "./tasty-states.js";
+import { TASTY_SPACING_PROPERTIES } from "../theme/tasty-config.js";
+import { getDefaultFontUsage, getFontFaces } from "../theme/fonts.js";
+
+configureCookbookStates();
+
+export default function DocumentStyles() {
+  const defaultFonts = getDefaultFontUsage();
+  if (defaultFonts.onest)
+    useFontFace("Onest Variable", {
+      src: `url("${onestLatin}") format("woff2-variations")`,
+      fontWeight: "100 900",
+      fontDisplay: defaultFonts.display ?? "swap",
+    });
+  if (defaultFonts.mono)
+    useFontFace("JetBrains Mono Variable", {
+      src: `url("${jetBrainsMonoLatin}") format("woff2-variations")`,
+      fontWeight: "100 800",
+      fontDisplay: defaultFonts.display ?? "swap",
+    });
+  for (const face of getFontFaces()) useFontFace(face.family, face.descriptors);
+
+  useGlobalStyles(
+    ":root",
+    resolveComponentStyles("Layout", {
+      overflow: {
+        "": null,
+        ":has(#cookbook__sidebar:popover-open) & @mobile": "hidden",
+      },
+      colorScheme: {
+        "": "dark",
+        '[data-theme="light"]': "light",
+        "![data-theme] & @system-light": "light",
+      },
+      "$docs-nav-height": {
+        "": "4.5rem",
+        ":has(.td-top-tabs)": "7.25rem",
+        "@mobile": "3.5rem",
+        "@mobile & [data-has-sidebar]": "6.5rem",
+      },
+      "$docs-nav-pad-x": {
+        "": "clamp(1.25rem, 2.5vw, 2rem)",
+        "@mobile": "1rem",
+      },
+      "$docs-nav-gap": { "": "0.75rem", "@mobile": "0.5rem" },
+      "$docs-sidebar-pad-x": "1.5rem",
+      "$docs-content-pad-x": {
+        "": "clamp(1.5rem, 4vw, 4rem)",
+        "@mobile": "1rem",
+      },
+      "$docs-menu-button-size": { "": "2.5rem", "@mobile": "2.25rem" },
+      "$docs-mobile-toc-height": "0rem",
+      Islands: {
+        $: "astro-island, astro-slot, astro-static-slot",
+        display: "contents",
+      },
+    }),
+  );
+
+  useGlobalStyles(
+    ":where(html)",
+    resolveComponentStyles("Document", {
+      "@property": TASTY_SPACING_PROPERTIES,
+      boxSizing: "border-box",
+      scrollBehavior: { "@reduced-motion": "auto" },
+      transitionDuration: { "@reduced-motion": "0.01ms" },
+      "$margin-block-start": "0",
+      "$margin-block-end": "0",
+      blockSize: "min 100%",
+      blockScrollPadding:
+        "(1.5rem + $docs-nav-height + $docs-mobile-toc-height) start",
+      All: {
+        $: "&::before, &::after, *, *::before, *::after",
+        boxSizing: "border-box",
+        scrollBehavior: {
+          "@reduced-motion": "auto",
+        },
+        transitionDuration: {
+          "@reduced-motion": "0.01ms",
+        },
+      },
+      BlockSpacing: {
+        $: "*",
+        // Reset on each element: spacing tokens must never leak into its children.
+        "$margin-block-start": {
+          "": "0",
+          "@own(:is(p,ul,ol,dl,blockquote,pre,figure))": "1em",
+          "@own(:is(hr))": "0.5em",
+          "@own(:is(h1))": "0.67em",
+          "@own(:is(h2))": "0.83em",
+          "@own(:is(h3))": "1em",
+          "@own(:is(h4))": "1.33em",
+          "@own(:is(h5))": "1.67em",
+          "@own(:is(h6))": "2.33em",
+        },
+        "$margin-block-end": {
+          "": "0",
+          "@own(:is(p,ul,ol,dl,blockquote,pre,figure))": "1em",
+          "@own(:is(hr))": "0.5em",
+          "@own(:is(h1))": "0.67em",
+          "@own(:is(h2))": "0.83em",
+          "@own(:is(h3))": "1em",
+          "@own(:is(h4))": "1.33em",
+          "@own(:is(h5))": "1.67em",
+          "@own(:is(h6))": "2.33em",
+        },
+      },
+      Body: {
+        $: "body",
+        inlineSize: "min 0",
+        blockSize: "min 100%",
+        margin: "0",
+        color: "#text",
+        fill: "#surface",
+        preset: "body",
+      },
+      Control: {
+        $: ":where(button), :where(input), :where(select), :where(textarea)",
+        preset: "body",
+        blockSize: "min $control-height",
+        radius: "$radius",
+        shadow: "none",
+      },
+      Pointer: {
+        $: ":where(button), :where(summary), :where(select)",
+        cursor: "pointer",
+      },
+      ResponsiveWidth: {
+        $: "img, :where(picture), video, canvas, svg, iframe",
+        inlineSize: {
+          "": null,
+          "@own(![width] | :is(picture))": "max 100%",
+        },
+      },
+      ResponsiveHeight: {
+        $: "img, :where(picture), video, canvas, svg",
+        blockSize: {
+          "": null,
+          "@own(![height] | :is(picture))": "auto",
+        },
+      },
+      Hidden: {
+        $: ":where(*), :where(.cookbook-hidden)",
+        hide: {
+          "": null,
+          "@own([hidden] | .cookbook-hidden)": true,
+        },
+      },
+      PrintHidden: {
+        $: ".cookbook-print-hidden",
+        display: { "@media:print": "none" },
+      },
+      DesktopBlock: {
+        $: ":is(.md\\:cookbook-block)",
+        display: { "": "block", "@mobile": "none" },
+      },
+      DesktopFlex: {
+        $: ":is(.md\\:cookbook-flex)",
+        display: { "": "flex", "@mobile": "none" },
+      },
+      ScreenReaderOnly: {
+        $: ".sr-only",
+        position: "absolute",
+        inlineSize: "1px",
+        blockSize: "1px",
+        padding: "0",
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        border: "0",
+      },
+      Strong: { $: ":where(strong), :where(b)", preset: "strong" },
+      Link: { $: "a", color: "#accent-text" },
+      NarrowBlock: {
+        $: ":is(.lg\\:cookbook-hidden)",
+        display: { "": "none", "@narrow-layout": "block" },
+      },
+      MobileBlock: {
+        $: ":is(.md\\:cookbook-hidden)",
+        display: { "": "none", "@mobile": "block" },
+      },
+      Code: {
+        $: ":where(code), :where(kbd), :where(samp), :where(pre)",
+        preset: "code",
+      },
+      FocusRing: {
+        $: ":where(a), :where(button), :where(input), :where(select), :where(textarea), :where(summary)",
+        outline: {
+          "": null,
+          "@own(:focus-visible)":
+            "$outline-width solid #focus / $outline-offset",
+        },
+      },
+      CurrentLink: {
+        $: "a",
+        radius: { "": null, '@own([aria-current="page"])': "$radius" },
+      },
+      SearchOpen: {
+        $: "body",
+        overflow: { "": null, "@own([data-search-modal-open])": "hidden" },
+      },
+    }),
+  );
+
+  useGlobalStyles(
+    ":where(h1, h2, h3, h4, h5, h6, .site-title)",
+    resolveComponentStyles("Heading", {
+      color: "#heading",
+      preset: {
+        "": "heading",
+        ":is(h1)": "h1",
+        ":is(h2)": "h2",
+        ":is(h3)": "h3",
+        ":is(h4)": "h4",
+        ":is(h5)": "h5",
+        ":is(h6)": "h6",
+      },
+      textWrap: "balance",
+      "$margin-block-start": { "": null, '[id="_top"]': "($gap * 2)" },
+      blockMargin: "$margin-block-start $margin-block-end",
+    }),
+  );
+
+  return null;
+}

package/dist/components/EditLink.astro

@@ -4,7 +4,7 @@ const { editUrl } = Astro.locals.cookbookRoute;
 
 {
   editUrl && (
-    <a href={editUrl} class="cookbook-print-hidden">
+    <a data-element="MetaLink" href={editUrl} class="cookbook-print-hidden">
       {Astro.locals.t("page.editLink")}
     </a>
   )

package/dist/components/Footer.styles.js

@@ -0,0 +1,45 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const FooterRoot = defineComponent("Footer", {
+  as: "footer",
+  "data-element": "Footer",
+  styles: {
+    display: "flex",
+    flow: "column",
+    gap: "($gap * 3)",
+    Meta: {
+      display: "flex",
+      flow: "row wrap",
+      justifyContent: "space-between",
+      gap: "($gap * 1.5) ($gap * 6)",
+      blockMargin: "($gap * 6) start",
+      color: "#text-muted",
+      preset: "small",
+    },
+    MetaLink: {
+      display: "flex",
+      alignItems: "center",
+      gap: "$gap",
+      inlineMargin: { "": "0", "@own(:only-child)": "auto start" },
+      color: { "": "#text-muted", "@own(:hover)": "#text" },
+      textDecoration: "none",
+    },
+    MetaUpdated: {
+      inlineMargin: { "": "0", "@own(:only-child)": "auto start" },
+    },
+    Credit: {
+      margin: "($gap * 3) auto",
+      color: "#text",
+      preset: "small",
+      textAlign: "center",
+    },
+    CreditLink: {
+      color: { "": "#accent-text", "@own(:hover)": "#text" },
+      preset: "small / strong",
+      textDecoration: "none",
+    },
+  },
+});

package/dist/components/Header.styles.js

@@ -0,0 +1,96 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const HeaderRoot = defineComponent("Header", {
+  as: "div",
+  "data-element": "Header",
+  styles: {
+    display: "flex",
+    flow: "column",
+    inlineSize: "0 100% ($layout-width - ($docs-sidebar-pad-x * 2))",
+    blockSize: "100%",
+    inlineMargin: "auto",
+
+    Primary: {
+      display: "flex",
+      alignItems: "center",
+      gap: { "": "clamp(0.5rem, 1.5vw, 1.5rem)", "@mobile": "0.5rem" },
+      blockSize: { "": "4.5rem", "@mobile": "3.5rem" },
+      flexShrink: "0",
+    },
+    Title: {
+      display: "flex",
+      alignItems: "center",
+      flow: "row",
+      gap: "$gap",
+      overflow: "hidden",
+      flexShrink: "1",
+      inlineSize: "min 0",
+      inlineMargin: { "": "0 end", "@mobile": "auto end" },
+    },
+    LogoLink: {
+      display: "inline-grid",
+      flexShrink: "0",
+      placeItems: "center",
+      color: "#text",
+      textDecoration: "none",
+    },
+    Logo: {
+      inlineSize: { "": "2rem", "@mobile": "1.75rem" },
+      blockSize: { "": "2rem", "@mobile": "1.75rem" },
+    },
+    SiteTitle: {
+      inlineSize: "min 0",
+      overflow: "hidden",
+      color: "#text",
+      preset: { "": "h4", "@mobile": "h5" },
+      textDecoration: "none",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+    },
+    Search: {
+      $: "Primary > Search",
+      display: "flex",
+      alignItems: "center",
+      flexGrow: { "": "1", "@mobile": "0" },
+      flexShrink: { "": "1", "@mobile": "0" },
+      inlineSize: { "": "min 0", "@mobile": "$docs-menu-button-size" },
+      inlineMargin: { "": "auto", "@mobile": "0" },
+    },
+    SearchElement: {
+      $: "Search site-search",
+      inlineSize: "0 100% 28rem",
+      inlineMargin: "auto",
+    },
+    Tools: {
+      display: "flex",
+      hide: { "": false, "@mobile": true },
+      flow: "row",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      gap: "($gap * 0.5)",
+    },
+    Social: {
+      display: "flex",
+      alignItems: "center",
+    },
+    MobileTheme: {
+      display: "grid",
+      hide: { "": true, "@mobile": false },
+      flexShrink: "0",
+      order: "1",
+      inlineSize: "$docs-menu-button-size",
+      blockSize: "$docs-menu-button-size",
+    },
+    MobileLanguage: {
+      display: "grid",
+      hide: { "": true, "@mobile": false },
+      flexShrink: "0",
+      order: "1",
+      inlineSize: "$docs-menu-button-size",
+      blockSize: "$docs-menu-button-size",
+    },
+  },
+});