@tenphi/renderer 0.31.4 → 0.33.0

package/dist/components/Card.astro

@@ -8,5 +8,5 @@ const { title, href } = Astro.props;
 
 <CardRoot as={href ? "a" : undefined} className="td-card" href={href}>
   {title && <h3>{title}</h3>}
-  <div><slot /></div>
+  <CardRoot.Body><slot /></CardRoot.Body>
 </CardRoot>

package/dist/components/Card.styles.js

@@ -9,6 +9,8 @@ export const CardRoot = defineComponent("Card", {
   "data-block": "",
   styles: {
     display: "grid",
+    // Keep rows at the top when a surrounding grid stretches the card.
+    alignContent: "start",
     gap: "1.5x",
     padding: "2.5x",
     color: "#text",
@@ -55,5 +57,14 @@ export const CardRoot = defineComponent("Card", {
       blockMargin: "$margin-block-start $margin-block-end",
       inlineMargin: "0",
     },
+    Body: {
+      // The sibling selector outranks prose block spacing, so the grid gap
+      // alone separates the body from the title.
+      $: "> h3 + Body",
+      "$margin-block-start": "0",
+      "$margin-block-end": "0",
+      blockMargin: "$margin-block-start $margin-block-end",
+    },
   },
+  elements: { Body: "div" },
 });

package/dist/components/CardGrid.astro

@@ -0,0 +1,6 @@
+---
+import type { CardGridProps as Props } from "./props.js";
+import { CardGridRoot } from "./CardGrid.styles.js";
+---
+
+<CardGridRoot><slot /></CardGridRoot>

package/dist/components/CardGrid.styles.js

@@ -0,0 +1,25 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const CardGridRoot = defineComponent("CardGrid", {
+  as: "div",
+  "data-element": "CardGrid",
+  styles: {
+    display: "grid",
+    gridColumns: {
+      "": "minmax(0, 1fr)",
+      "@sm": "repeat(2, minmax(0, 1fr))",
+    },
+    gap: "2x",
+    Card: {
+      // The sibling selector outranks prose block spacing, so the grid gap
+      // alone separates cards and cards in a row keep the same height.
+      $: "> Card + Card",
+      "$margin-block-start": "0",
+      "$margin-block-end": "0",
+      blockMargin: "$margin-block-start $margin-block-end",
+    },
+  },
+});

package/dist/components/CodeGroup.styles.js

@@ -15,6 +15,14 @@ export const CodeGroupRoot = defineComponent("CodeGroup", {
       blockMargin: "$margin-block-start $margin-block-end",
       inlineMargin: "0",
     },
+    MarkdownCodeBlock: {
+      // The sibling selector outranks prose block spacing, so the caption's
+      // own end margin separates it from the code, including when hidden.
+      $: "Caption + MarkdownCodeBlock",
+      "$margin-block-start": "0",
+      "$margin-block-end": "0",
+      blockMargin: "$margin-block-start $margin-block-end",
+    },
     Pre: { $: "pre", preset: "code" },
     Code: {
       $: "pre code",

package/dist/components/MarkdownCodeBlock.styles.js

@@ -32,7 +32,9 @@ export function MarkdownCodeBlockStyles() {
         tabSize: "2",
       },
       CopyButton: {
-        $: "> CopyButton",
+        // Following the pre outranks prose block spacing, which would otherwise
+        // offset the button from the corner in some stylesheet orders.
+        $: "> pre + CopyButton",
         position: "absolute",
         zIndex: "1",
         blockInset: "1x start",
@@ -55,7 +57,8 @@ export function MarkdownCodeBlockStyles() {
         transition: "color, fill",
       },
       HoverCopyButton: {
-        $: '> [data-element="CopyButton"]',
+        // Match CopyButton's selector weight so this overlay still applies.
+        $: '> pre + [data-element="CopyButton"]',
         color: { "": null, "@own(:hover)": "#text" },
         fill: {
           "": null,
@@ -63,7 +66,7 @@ export function MarkdownCodeBlockStyles() {
         },
       },
       CopiedButton: {
-        $: '> [data-element="CopyButton"]',
+        $: '> pre + [data-element="CopyButton"]',
         color: {
           "": null,
           "copy-state=copied": "#green-text",

package/dist/components/Tab.astro

@@ -6,5 +6,5 @@ const { label } = Astro.props;
 
 <TabRoot data-tab-panel data-label={label}>
   <TabRoot.Heading data-tab-heading>{label}</TabRoot.Heading>
-  <slot />
+  <TabRoot.Body><slot /></TabRoot.Body>
 </TabRoot>

package/dist/components/Tab.styles.js

@@ -25,6 +25,14 @@ export const TabRoot = defineComponent("Tab", {
       $: "> *",
       hide: { "": null, "@own([data-tab-heading] & [hidden])": true },
     },
+    Body: {
+      // The sibling selector outranks prose block spacing, so content starts at
+      // the panel padding while the fallback heading is hidden.
+      $: "> Heading + Body",
+      "$margin-block-start": "0",
+      "$margin-block-end": "0",
+      blockMargin: "$margin-block-start $margin-block-end",
+    },
   },
-  elements: { Heading: "h3" },
+  elements: { Heading: "h3", Body: "div" },
 });

package/dist/components/Tabs.styles.js

@@ -22,6 +22,14 @@ export const TabsRoot = defineComponent("Tabs", {
       overflow: "auto",
       fill: "#surface-2",
     },
+    Tab: {
+      // The sibling selector outranks prose block spacing, which would
+      // otherwise separate every panel from the tab list.
+      $: "> List ~ Tab",
+      "$margin-block-start": "0",
+      "$margin-block-end": "0",
+      blockMargin: "$margin-block-start $margin-block-end",
+    },
     Button: {
       $: "> List > button",
       "$margin-block-start": "0",

package/dist/components/props.d.ts

@@ -20,6 +20,7 @@ interface PreviewProps {
   /** Room below the content of a preview that runs scripts, as a CSS length such as `12rem`, for overlays like a listbox; defaults to `0`. */
   buffer?: string;
 }
+type CardGridProps = Record<string, never>;
 type StepsProps = Record<string, never>;
 interface TabsProps {
   label?: string;
@@ -40,5 +41,5 @@ interface CodeGroupProps {
   }>;
 }
 //#endregion
-export { CalloutProps, CardProps, CodeGroupProps, LogoProps, PreviewProps, StepsProps, TabProps, TabsProps };
+export { CalloutProps, CardGridProps, CardProps, CodeGroupProps, LogoProps, PreviewProps, StepsProps, TabProps, TabsProps };
 //# sourceMappingURL=props.d.ts.map

package/dist/components/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","names":[],"sources":["../../src/components/props.ts"],"mappings":";UAAiB;EACf;EACA;;UAEe;EACf;EACA;EACA;;UAEe;EACf;EACA;EACA;EACA;;EAEA;;EAEA;;EAEA;;KAEU,aAAa;UACR;EACf;;UAEe;EACf;;UAEe;EACf;EACA;;UAEe;EACf;EACA,OAAO;IAAQ;IAAe;IAAc"}
+{"version":3,"file":"props.d.ts","names":[],"sources":["../../src/components/props.ts"],"mappings":";UAAiB;EACf;EACA;;UAEe;EACf;EACA;EACA;;UAEe;EACf;EACA;EACA;EACA;;EAEA;;EAEA;;EAEA;;KAEU,gBAAgB;KAChB,aAAa;UACR;EACf;;UAEe;EACf;;UAEe;EACf;EACA;;UAEe;EACf;EACA,OAAO;IAAQ;IAAe;IAAc"}

package/dist/components/props.ts

@@ -19,6 +19,7 @@ export interface PreviewProps {
   /** Room below the content of a preview that runs scripts, as a CSS length such as `12rem`, for overlays like a listbox; defaults to `0`. */
   buffer?: string;
 }
+export type CardGridProps = Record<string, never>;
 export type StepsProps = Record<string, never>;
 export interface TabsProps {
   label?: string;

package/dist/components-public.d.ts

@@ -1,6 +1,7 @@
 import type { AstroComponentFactory } from "astro/runtime/server/index.js";
 import type {
   CardProps,
+  CardGridProps,
   LogoProps,
   PreviewProps,
   StepsProps,
@@ -12,6 +13,7 @@ import type {
 export type * from "./components/props.js";
 type Component<Props> = (props: Props) => ReturnType<AstroComponentFactory>;
 export const Card: Component<CardProps>;
+export const CardGrid: Component<CardGridProps>;
 export const Logo: Component<LogoProps>;
 export const Preview: Component<PreviewProps>;
 export const Steps: Component<StepsProps>;

package/dist/components.d.ts

@@ -1,5 +1,6 @@
-import { CalloutProps, CardProps, CodeGroupProps, LogoProps, PreviewProps, StepsProps, TabProps, TabsProps } from "./components/props.js";
+import { CalloutProps, CardGridProps, CardProps, CodeGroupProps, LogoProps, PreviewProps, StepsProps, TabProps, TabsProps } from "./components/props.js";
 import Card from "./components/Card.astro";
+import CardGrid from "./components/CardGrid.astro";
 import Logo from "./components/Logo.astro";
 import Preview from "./components/Preview.astro";
 import Steps from "./components/Steps.astro";
@@ -7,4 +8,4 @@ import Tabs from "./components/Tabs.astro";
 import Tab from "./components/Tab.astro";
 import Callout from "./components/Callout.astro";
 import CodeGroup from "./components/CodeGroup.astro";
-export { Callout, type CalloutProps, Card, type CardProps, CodeGroup, type CodeGroupProps, Logo, type LogoProps, Preview, type PreviewProps, Steps, type StepsProps, Tab, type TabProps, Tabs, type TabsProps };
+export { Callout, type CalloutProps, Card, CardGrid, type CardGridProps, type CardProps, CodeGroup, type CodeGroupProps, Logo, type LogoProps, Preview, type PreviewProps, Steps, type StepsProps, Tab, type TabProps, Tabs, type TabsProps };

package/dist/components.js

@@ -1,4 +1,5 @@
 import Card from "./components/Card.astro";
+import CardGrid from "./components/CardGrid.astro";
 import Logo from "./components/Logo.astro";
 import Preview from "./components/Preview.astro";
 import Steps from "./components/Steps.astro";
@@ -6,4 +7,4 @@ import Tabs from "./components/Tabs.astro";
 import Tab from "./components/Tab.astro";
 import Callout from "./components/Callout.astro";
 import CodeGroup from "./components/CodeGroup.astro";
-export { Callout, Card, CodeGroup, Logo, Preview, Steps, Tab, Tabs };
+export { Callout, Card, CardGrid, CodeGroup, Logo, Preview, Steps, Tab, Tabs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/renderer",
-  "version": "0.31.4",
+  "version": "0.33.0",
   "description": "Astro renderer and Tasty theme for Cookbook",
   "type": "module",
   "sideEffects": [
@@ -61,9 +61,9 @@
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/onest": "^5.3.0",
     "@pagefind/default-ui": "1.5.2",
-    "@tenphi/docs": "0.31.4",
-    "@tenphi/eslint-plugin-tasty": "1.16.0",
-    "@tenphi/glaze": "2.0.2",
+    "@tenphi/docs": "0.33.0",
+    "@tenphi/eslint-plugin-tasty": "1.17.0",
+    "@tenphi/glaze": "3.0.0",
     "@tenphi/tasty": "3.17.1",
     "@uniaria/core": "0.3.0",
     "@uniaria/elements": "0.3.0",