@tenphi/renderer 0.21.0 → 0.21.2

package/dist/components/MarkdownCodeBlock.styles.js

@@ -0,0 +1,131 @@
+import { useGlobalStyles } from "@tenphi/tasty";
+import checkIcon from "../icons/check.svg?raw";
+import copyIcon from "../icons/copy.svg?raw";
+import { resolveComponentStyles } from "./component-styles.js";
+import { svgIconUrl } from "./svg-icon.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export function MarkdownCodeBlockStyles() {
+  useGlobalStyles(
+    ':is(.cookbook-markdown-content .td-code-block, .td-code-block[data-element="MarkdownCodeBlock"])',
+    resolveComponentStyles("MarkdownCodeBlock", {
+      "$copy-button-size": "2rem",
+      display: "block",
+      position: "relative",
+      inlineSize: "min 0",
+      Pre: {
+        $: "> pre",
+        "$margin-block-start": "0",
+        "$margin-block-end": "0",
+        blockMargin: "$margin-block-start $margin-block-end",
+        inlineMargin: "0",
+        padding: "0 3.75rem 0 1rem",
+        // Balance a single code line around the copy control, including the border.
+        blockPadding:
+          "max(0px, ($copy-button-size - 1lh) / 2 + $gap - $border-width)",
+        overflowX: "auto",
+        color: "#syntax-text",
+        border: true,
+        fill: "#syntax-bg",
+        radius: "$card-radius",
+        tabSize: "2",
+      },
+      CopyButton: {
+        $: "> CopyButton",
+        position: "absolute",
+        zIndex: "1",
+        blockInset: "$gap start",
+        inlineInset: "$gap end",
+        "$margin-block-start": "0",
+        "$margin-block-end": "0",
+        blockMargin: "$margin-block-start $margin-block-end",
+        inlineMargin: "0",
+        display: "grid",
+        placeItems: "center",
+        inlineSize: "$copy-button-size $copy-button-size initial",
+        blockSize: "$copy-button-size $copy-button-size initial",
+        padding: "0",
+        color: "#text-soft",
+        border: true,
+        fill: "#surface-2",
+        radius: "$radius",
+        preset: "small / strong",
+        cursor: "pointer",
+        transition: "color $transition, fill $transition",
+      },
+      HoverCopyButton: {
+        $: '> [data-element="CopyButton"]',
+        color: { "": null, "@own(:hover)": "#text" },
+        fill: {
+          "": null,
+          "@own(:hover)": "#surface-2-hover",
+        },
+      },
+      CopiedButton: {
+        $: '> [data-element="CopyButton"]',
+        color: {
+          "": null,
+          '@own([data-copy-state="copied"])': "#green-text",
+        },
+        // Recolor only; CopyButton owns the border width and style, including theme overrides.
+        // eslint-disable-next-line tasty/prefer-shorthand-property
+        borderColor: {
+          "": null,
+          '@own([data-copy-state="copied"])': "#green",
+        },
+      },
+      CopyIcon: {
+        $: "> CopyButton > CopyIcon",
+        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(copyIcon)}") center / contain no-repeat`,
+      },
+      CopiedIcon: {
+        $: '> CopyButton > [data-element="CopyIcon"]',
+        mask: {
+          "": null,
+          // SVG encoding runs only during the server build.
+          // eslint-disable-next-line tasty/no-runtime-styles-mutation
+          '@own(:is([data-element="CopyButton"][data-copy-state="copied"] > [data-element="CopyIcon"]))': `url("${svgIconUrl(checkIcon)}") center / contain no-repeat`,
+        },
+      },
+      Code: { $: "pre code", padding: "0", color: "inherit", fill: "#clear" },
+      Diff: { $: "pre.td-diff", inlinePadding: "0" },
+      DiffCode: {
+        $: "pre.td-diff code",
+        display: "block",
+        inlineSize: "100% max-content initial",
+        // Zero line height removes gaps between block diff lines; the tight modifier would not.
+        // eslint-disable-next-line tasty/prefer-shorthand-property
+        lineHeight: "0",
+      },
+      DiffLine: {
+        $: "pre.td-diff > code > :is(.line)",
+        display: "block",
+        inlinePadding: "1rem",
+        preset: "code",
+      },
+      EmptyDiffLine: {
+        // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
+        // eslint-disable-next-line tasty/no-state-in-selector
+        $: "pre.td-diff > code > .line:empty::before",
+        content: '"\\200b"',
+      },
+      InsertedLine: {
+        $: "pre.td-diff > code > .td-diff-line--inserted",
+        fill: "#green-surface",
+      },
+      DeletedLine: {
+        $: "pre.td-diff > code > .td-diff-line--deleted",
+        fill: "#red-surface",
+      },
+    }),
+  );
+  return null;
+}

package/dist/components/MarkdownContent.styles.js

@@ -0,0 +1,231 @@
+import { useGlobalStyles } from "@tenphi/tasty";
+import { resolveComponentStyles } from "./component-styles.js";
+import { MarkdownInlineCodeStyles } from "./MarkdownInlineCode.styles.js";
+import { SyntaxHighlightStyles } from "./SyntaxHighlight.styles.js";
+import { MarkdownCodeBlockStyles } from "./MarkdownCodeBlock.styles.js";
+import { MermaidSourceStyles } from "./MermaidSource.styles.js";
+import { MermaidStyles } from "./Mermaid.styles.js";
+import { MarkdownHeadingStyles } from "./MarkdownHeading.styles.js";
+import { MarkdownAlertStyles } from "./MarkdownAlert.styles.js";
+import { MarkdownTableStyles } from "./MarkdownTable.styles.js";
+import chevronRightIcon from "../icons/chevron-right.svg?raw";
+import { svgIconUrl } from "./svg-icon.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export default function MarkdownStyles() {
+  // Match component-root specificity so prose owns spacing inside Markdown.
+  useGlobalStyles(
+    ".cookbook-markdown-content.cookbook-markdown-content",
+    resolveComponentStyles("Markdown", {
+      preset: "prose",
+      Block: {
+        $: ":where(p), :where(ul), :where(ol), :where(dl), :where(blockquote), :where(pre), :where(table), :where(hr), :where(details)",
+        "$margin-block-start": { "": null, "@own(!:is(.not-content *))": "0" },
+        "$margin-block-end": { "": null, "@own(!:is(.not-content *))": "0" },
+        blockMargin: {
+          "": null,
+          "@own(!:is(.not-content *))": "$margin-block-start $margin-block-end",
+        },
+      },
+      // Linked Cards are block content even though their root is an anchor.
+      BlockSpacing: {
+        // Prose spacing must win over each block component's root margin.
+        $: "&.cookbook-markdown-content * + *",
+        blockMargin: {
+          "": null,
+          "(@own(:is(:not(a,strong,em,del,span,input,code,br) + *)) | @own(:is(a.td-card + *))) & (@own(!:is(a,strong,em,del,span,input,code,br,li,dt,dd,.not-content *)) | @own(:is(a.td-card)))":
+            "$margin-block-start $margin-block-end",
+        },
+        "$margin-block-start": {
+          "": null,
+          "(@own(:is(:not(a,strong,em,del,span,input,code,br) + *)) | @own(:is(a.td-card + *))) & (@own(!:is(a,strong,em,del,span,input,code,br,li,dt,dd,.not-content *)) | @own(:is(a.td-card)))":
+            "($gap * 3)",
+        },
+      },
+      HeadingSpacing: {
+        $: "* + h1, * + h2, * + h3, * + h4, * + h5, * + h6, * + .cookbook-heading-wrapper",
+        "$margin-block-start": {
+          "": null,
+          "@own(:is(:not(h1,h2,h3,h4,h5,h6,.cookbook-heading-wrapper) + *)) & @own(!:is(.not-content *))":
+            "1.5em",
+        },
+        "$margin-block-end": {
+          "": null,
+          "@own(:is(:not(h1,h2,h3,h4,h5,h6,.cookbook-heading-wrapper) + *)) & @own(!:is(.not-content *))":
+            "0",
+        },
+        blockMargin: {
+          "": null,
+          "@own(:is(:not(h1,h2,h3,h4,h5,h6,.cookbook-heading-wrapper) + *)) & @own(!:is(.not-content *))":
+            "$margin-block-start $margin-block-end",
+        },
+      },
+      List: {
+        $: ":where(ul), :where(ol)",
+        inlinePadding: {
+          "": null,
+          "@own(!:is(.not-content *))": "1.5rem start",
+        },
+      },
+      CompactItem: {
+        $: ":where(li + li), :where(dt + dt), :where(dt + dd), :where(dd + dd)",
+        "$margin-block-start": {
+          "": null,
+          "@own(!:is(.not-content *))": "($gap * 0.5)",
+        },
+        "$margin-block-end": { "": null, "@own(!:is(.not-content *))": "0" },
+        blockMargin: {
+          "": null,
+          "@own(!:is(.not-content *))": "$margin-block-start $margin-block-end",
+        },
+      },
+      ListItem: {
+        $: "li",
+        overflowWrap: { "": null, "@own(!:is(.not-content *))": "anywhere" },
+      },
+      DefinitionTerm: {
+        $: "dt",
+        preset: { "": null, "@own(!:is(.not-content *))": "strong" },
+      },
+      DefinitionDescription: {
+        $: "dd",
+        inlinePadding: {
+          "": null,
+          "@own(!:is(.not-content *))": "($gap * 2) start",
+        },
+      },
+      Link: {
+        $: "a",
+        color: { "": null, "@own(!:is(.not-content *))": "#accent-text" },
+        textUnderlineOffset: {
+          "": null,
+          "@own(!:is(.not-content *))": "0.15em",
+        },
+      },
+      HoverLink: {
+        $: "a",
+        color: {
+          "": null,
+          "@own(:hover) & @own(!:is(.not-content *))": "#text",
+        },
+      },
+      Quote: {
+        $: "blockquote",
+        inlinePadding: { "": null, "@own(!:is(.not-content *))": "2x start" },
+        color: { "": null, "@own(!:is(.not-content *))": "#text-soft" },
+        inlineBorder: {
+          "": null,
+          "@own(!:is(.not-content *))": "1bw solid #border start",
+        },
+      },
+      Rule: {
+        $: "hr",
+        border: { "": null, "@own(!:is(.not-content *))": "0" },
+        blockBorder: {
+          "": null,
+          "@own(!:is(.not-content *))": "$border-width solid #border end",
+        },
+      },
+      Details: {
+        $: "details",
+        inlinePadding: {
+          "": null,
+          "@own(!:is(.not-content *))": "($gap * 2) start",
+        },
+        inlineBorder: {
+          "": null,
+          "@own(!:is(.not-content *))": "2px solid #border start",
+        },
+        // Change only color; border widths and styles belong to other rules or theme overrides.
+        // eslint-disable-next-line tasty/prefer-shorthand-property
+        borderColor: { "": null, "@own(!:is(.not-content *))": "#border" },
+      },
+      HoverDetails: {
+        $: "details",
+        // Change only color; border widths and styles belong to other rules or theme overrides.
+        // eslint-disable-next-line tasty/prefer-shorthand-property
+        borderColor: {
+          "": null,
+          "(@own(![open] & :hover) | @own(:has(> summary:hover))) & @own(!:is(.not-content *))":
+            "#accent-text",
+        },
+      },
+      Summary: {
+        $: "summary",
+        display: { "": "", "@own(!:is(.not-content *))": "block" },
+        inlineMargin: {
+          "": null,
+          "@own(!:is(.not-content *))": "-0.5rem start",
+        },
+        inlinePadding: {
+          "": null,
+          "@own(!:is(.not-content *))": "0.5rem start",
+        },
+        color: { "": null, "@own(!:is(.not-content *))": "#text" },
+        preset: { "": null, "@own(!:is(.not-content *))": "strong" },
+      },
+      OpenSummary: {
+        $: "details > summary",
+        "$margin-block-start": {
+          "": null,
+          "@own(:is(details[open] > summary)) & @own(!:is(.not-content *))":
+            "0",
+        },
+        "$margin-block-end": {
+          "": null,
+          "@own(:is(details[open] > summary)) & @own(!:is(.not-content *))":
+            "($gap * 2)",
+        },
+        blockMargin: {
+          "": null,
+          "@own(:is(details[open] > summary)) & @own(!:is(.not-content *))":
+            "$margin-block-start $margin-block-end",
+        },
+      },
+      SummaryMarker: {
+        // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
+        // eslint-disable-next-line tasty/no-state-in-selector
+        $: "summary:not(.not-content *)::marker, summary:not(.not-content *)::-webkit-details-marker",
+        hide: true,
+      },
+      SummaryIcon: {
+        // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
+        // eslint-disable-next-line tasty/no-state-in-selector
+        $: "summary:not(.not-content *)::before",
+        content: '""',
+        display: "inline-block",
+        inlineSize: "1.25rem",
+        blockSize: "1.25rem",
+        inlineMargin: "($gap * 0.5) end",
+        verticalAlign: "middle",
+        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(chevronRightIcon)}") center / contain no-repeat`,
+        transition: "rotate $transition",
+      },
+      OpenSummaryIcon: {
+        // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
+        // eslint-disable-next-line tasty/no-state-in-selector
+        $: "details[open] > summary:not(.not-content *)::before",
+        rotate: "90deg",
+      },
+      Code: {
+        $: ":where(code)",
+        radius: { "": null, "@own(!:is(.not-content *))": "($radius * 0.65)" },
+      },
+    }),
+  );
+
+  MarkdownInlineCodeStyles();
+  SyntaxHighlightStyles();
+  MarkdownCodeBlockStyles();
+  MermaidSourceStyles();
+  MermaidStyles();
+  MarkdownHeadingStyles();
+  MarkdownAlertStyles();
+  MarkdownTableStyles();
+  return null;
+}

package/dist/components/MarkdownHeading.styles.js

@@ -0,0 +1,117 @@
+import { useGlobalStyles } from "@tenphi/tasty";
+import checkIcon from "../icons/check.svg?raw";
+import { resolveComponentStyles } from "./component-styles.js";
+import { svgIconUrl } from "./svg-icon.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export function MarkdownHeadingStyles() {
+  useGlobalStyles(
+    ".cookbook-markdown-content .cookbook-heading-wrapper",
+    resolveComponentStyles("MarkdownHeading", {
+      position: "relative",
+      color: "#heading",
+      preset: {
+        "": "heading",
+        ".level-h1": "h1",
+        ".level-h2": "h2",
+        ".level-h3": "h3",
+        ".level-h4": "h4",
+        ".level-h5": "h5",
+        ".level-h6": "h6",
+      },
+      Heading: {
+        $: "> *",
+        color: { "": null, "@own(:first-child)": "inherit" },
+        display: { "": "", "@own(:first-child)": "inline" },
+        inlinePadding: {
+          "": null,
+          "@own(:first-child)": "0 end",
+          "(@own(:first-child)) & (@mobile)": "1.75rem end",
+        },
+      },
+      Link: {
+        $: "> .cookbook-anchor-link",
+        position: { "": "absolute", "@mobile": "relative" },
+        blockInset: {
+          "": "((1lh - 1.75rem) / 2) start",
+          "@mobile": "auto start",
+        },
+        inlineInset: { "": "-2rem start", "@mobile": "auto start" },
+        display: "inline-grid",
+        placeItems: "center",
+        inlineSize: { "": "1.75rem", "@mobile": "1.5rem" },
+        blockSize: { "": "1.75rem", "@mobile": "1.5rem" },
+        inlineMargin: { "": "0 start", "@mobile": "-1.5rem start" },
+        verticalAlign: { "": "baseline", "@mobile": "middle" },
+        color: "#text-muted",
+        opacity: {
+          "": "1",
+          "@media(hover: hover)": "0",
+          "@mobile": "1",
+        },
+        radius: "$radius",
+        userSelect: "none",
+        textDecoration: "none",
+        transition: "color $transition, fill $transition, opacity $transition",
+      },
+      RevealedLink: {
+        $: "> .cookbook-anchor-link",
+        opacity: {
+          "": null,
+          ":hover | @own(:focus-visible)": "1",
+        },
+      },
+      HoverLink: {
+        $: "> .cookbook-anchor-link",
+        color: {
+          "": null,
+          "@own(:hover | :focus-visible)": "#accent-text",
+        },
+        fill: {
+          "": null,
+          "@own(:hover | :focus-visible)": "#surface-2-hover",
+        },
+      },
+      LinkIcon: {
+        $: "> .cookbook-anchor-link > .cookbook-anchor-icon",
+        display: "block",
+        preset: "inherit / tight",
+        // Scale with the current heading without replacing its inherited typography.
+        // eslint-disable-next-line tasty/prefer-shorthand-property
+        fontSize: "clamp(1rem, 0.65em, 1.5rem)",
+        textAlign: "center",
+        inlineSize: "1em",
+        blockSize: "1em",
+      },
+      CopiedLink: {
+        $: "> .cookbook-anchor-link",
+        color: { "": null, '@own([data-copy-state="copied"])': "#green-text" },
+        opacity: { "": null, '@own([data-copy-state="copied"])': "1" },
+      },
+      CopiedLinkIcon: {
+        $: "> .cookbook-anchor-link > .cookbook-anchor-icon",
+        visibility: {
+          "": null,
+          '@own(:is(.cookbook-anchor-link[data-copy-state="copied"] > .cookbook-anchor-icon))':
+            "hidden",
+        },
+      },
+      CopiedIcon: {
+        // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
+        // eslint-disable-next-line tasty/no-state-in-selector
+        $: '> .cookbook-anchor-link[data-copy-state="copied"]::after',
+        content: '""',
+        position: "absolute",
+        inlineSize: "clamp(1rem, 0.65em, 1.5rem)",
+        blockSize: "clamp(1rem, 0.65em, 1.5rem)",
+        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(checkIcon)}") center / contain no-repeat`,
+      },
+    }),
+  );
+  return null;
+}

package/dist/components/MarkdownInlineCode.styles.js

@@ -0,0 +1,19 @@
+import { useGlobalStyles } from "@tenphi/tasty";
+import { resolveComponentStyles } from "./component-styles.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export function MarkdownInlineCodeStyles() {
+  useGlobalStyles(
+    ".cookbook-markdown-content code:not(:where(pre *, .not-content *))",
+    resolveComponentStyles("MarkdownInlineCode", {
+      padding: "0.125rem 0.375rem",
+      color: "#text-soft",
+      fill: "#surface-3",
+      preset: "inline-code",
+      radius: "($radius * 0.65)",
+    }),
+  );
+  return null;
+}

package/dist/components/MarkdownTable.styles.js

@@ -0,0 +1,58 @@
+import { useGlobalStyles } from "@tenphi/tasty";
+import { resolveComponentStyles } from "./component-styles.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export function MarkdownTableStyles() {
+  useGlobalStyles(
+    ".cookbook-markdown-content:where(*)",
+    resolveComponentStyles("MarkdownTable", {
+      Table: {
+        $: "table",
+        inlineSize: "100%",
+        borderCollapse: "separate",
+        borderSpacing: "0",
+        color: "#text-soft",
+        preset: "small",
+        border: "$border-width solid #border",
+        radius: "$card-radius",
+      },
+      Cell: {
+        $: "th, td",
+        padding: "($gap * 1.5) ($gap * 2)",
+        verticalAlign: "top",
+        // Change only color; border widths and styles belong to other rules or theme overrides.
+        // eslint-disable-next-line tasty/prefer-shorthand-property
+        borderColor: "#border",
+      },
+      LastBodyRowCell: {
+        $: "tbody td",
+        // Clear only the last row's end border; the theme may configure its start border.
+        // eslint-disable-next-line tasty/prefer-shorthand-property
+        borderBlockEnd: { "@own(:is(tbody tr:last-child > td))": "0" },
+      },
+      HeaderCell: {
+        $: "th",
+        color: "#text",
+        fill: "#surface-2",
+        textAlign: "start",
+        radius: {
+          "@own(:is(thead:first-child tr:first-child > th) & :first-child & !:last-child)":
+            "($card-radius - $border-width) top-left",
+          "@own(:is(thead:first-child tr:first-child > th) & !:first-child & :last-child)":
+            "($card-radius - $border-width) top-right",
+          "@own(:is(thead:first-child tr:first-child > th) & :first-child & :last-child)":
+            "($card-radius - $border-width) top",
+        },
+      },
+      Scroll: {
+        $: ".td-table-scroll",
+        inlineSize: "initial 100% 100%",
+        overflow: "auto",
+        scrollbar: "thin",
+      },
+    }),
+  );
+  return null;
+}

package/dist/components/Mermaid.styles.js

@@ -0,0 +1,50 @@
+import { useGlobalStyles } from "@tenphi/tasty";
+import { resolveComponentStyles } from "./component-styles.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export function MermaidStyles() {
+  useGlobalStyles(
+    ".cookbook-markdown-content .td-mermaid",
+    resolveComponentStyles("Mermaid", {
+      display: "grid",
+      placeItems: "center",
+      inlineSize: "min 0",
+      padding: "($gap * 2)",
+      overflowX: "auto",
+      border: true,
+      fill: "#surface-2",
+      radius: "$card-radius",
+      Diagram: {
+        $: "> svg",
+        $bg: "#surface-2",
+        $fg: "#text",
+        $line: "#text-soft",
+        $accent: "#accent-text",
+        $muted: "#text-soft",
+        $surface: "#surface",
+        $border: "#border-strong",
+        $_text: "#text",
+        "$_text-sec": "#text-soft",
+        "$_text-muted": "#text-soft",
+        "$_text-faint": "#text-muted",
+        $_line: "#text-soft",
+        $_arrow: "#accent-text",
+        "$_node-fill": "#surface",
+        "$_node-stroke": "#border-strong",
+        "$_group-fill": "#surface-2",
+        "$_group-hdr": "#surface",
+        "$_inner-stroke": "#border",
+        "$_key-badge": "#surface",
+        display: "block",
+        inlineSize: "max 100%",
+        blockSize: "auto",
+        margin: "auto",
+      },
+      Text: { $: "text", font: "$body-font-family" },
+      MonoText: { $: ":is(.mono)", font: "$code-font-family" },
+    }),
+  );
+  return null;
+}

package/dist/components/MermaidSource.styles.js

@@ -0,0 +1,21 @@
+import { useGlobalStyles } from "@tenphi/tasty";
+import { resolveComponentStyles } from "./component-styles.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export function MermaidSourceStyles() {
+  useGlobalStyles(
+    '.cookbook-markdown-content pre[data-language="mermaid"]:not(.not-content *)',
+    resolveComponentStyles("MermaidSource", {
+      padding: "0.875rem 1rem",
+      overflowX: "auto",
+      color: "#syntax-text",
+      border: true,
+      fill: "#syntax-bg",
+      radius: "$card-radius",
+      tabSize: "2",
+    }),
+  );
+  return null;
+}

package/dist/components/MobileMenuFooter.styles.js

@@ -0,0 +1,27 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const MobileMenuFooterRoot = defineComponent("MobileMenuFooter", {
+  as: "div",
+  "data-element": "MobileMenuFooter",
+  styles: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flow: "row wrap",
+    gap: "($gap * 2)",
+    blockPadding: "$gap",
+    blockBorder: "$border-width solid #border start",
+    Social: {
+      $: ".td-mobile-preferences__social",
+      display: "flex",
+      hide: { "": false, ":empty": true },
+      alignItems: "center",
+      gap: "($gap * 2)",
+      inlineMargin: "auto end",
+      blockPadding: "($gap * 2)",
+    },
+  },
+});