@tenphi/renderer 0.22.1 → 0.23.0

package/dist/components/SiteLogo.astro

@@ -15,7 +15,7 @@ const logo = content.logo;
       aria-hidden={logo.decorative ? "true" : undefined}
     >
       <img
-        class={logo.dark ? "td-site-logo__light" : undefined}
+        data-element={logo.dark ? "Light" : undefined}
         src={logo.light.src}
         width={logo.light.width}
         height={logo.light.height}
@@ -24,7 +24,7 @@ const logo = content.logo;
       />
       {logo.dark && (
         <img
-          class="td-site-logo__dark"
+          data-element="Dark"
           src={logo.dark.src}
           width={logo.dark.width}
           height={logo.dark.height}

package/dist/components/SiteLogo.styles.js

@@ -11,8 +11,8 @@ export const SiteLogoRoot = defineComponent("SiteLogo", {
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0,
-    inlineSize: { "": "auto max 12rem", "@mobile": "auto max 30vw" },
-    blockSize: { "": "2rem", "@mobile": "1.75rem" },
+    inlineSize: { "": "auto max 12rem", "!@md": "auto max 30vw" },
+    blockSize: { "": "2rem", "!@md": "1.75rem" },
     Image: {
       $: "> img",
       display: "block",
@@ -21,11 +21,11 @@ export const SiteLogoRoot = defineComponent("SiteLogo", {
       objectFit: "contain",
     },
     Light: {
-      $: "> .td-site-logo__light",
+      $: "> Light",
       hide: { "": false, "@dark": true },
     },
     Dark: {
-      $: "> .td-site-logo__dark",
+      $: "> Dark",
       hide: { "": true, "@dark": false },
     },
   },

package/dist/components/SyntaxHighlight.styles.js

@@ -11,75 +11,96 @@ export function SyntaxHighlightStyles() {
     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" },
+        "[data-syntax-comment]": "#syntax-comment",
+        "[data-syntax-punctuation]": "#syntax-punctuation",
+        "[data-syntax-keyword]": "#syntax-keyword",
+        "[data-syntax-string]": "#syntax-string",
+        "[data-syntax-token]": "#syntax-token",
+        "[data-syntax-property]": "#syntax-property",
+        "[data-syntax-number]": "#syntax-number",
+        "[data-syntax-function]": "#syntax-function",
+        "[data-syntax-value]": "#syntax-value",
+        "[data-syntax-operator]": "#syntax-operator",
+        "[data-syntax-text]": "#syntax-text",
+        "[data-green-text]": "#green-text",
+        "[data-red-text]": "#red-text",
+      },
+      fill: { "": null, "[data-syntax-bg]": "#syntax-bg" },
+      overflowX: { "": null, "[data-syntax-scroll]": "auto" },
+      whiteSpace: { "": null, "[data-syntax-wrap]": "pre-wrap" },
+      overflowWrap: { "": null, "[data-syntax-wrap]": "break-word" },
       // Descendant identities stay neutral so these rules retain their original weight.
-      Marker: { $: ":where(.td-syntax-marker)", userSelect: "none" },
+      Marker: {
+        $: ":where(span)",
+        userSelect: { "": null, "@own(syntax-marker)": "none" },
+      },
       Comment: {
-        $: ":where(.td-syntax-comment)",
-        color: "#syntax-comment",
+        $: ":where(span)",
+        color: { "": null, "@own(syntax-comment)": "#syntax-comment" },
       },
       Punctuation: {
-        $: ":where(.td-syntax-punctuation)",
-        color: "#syntax-punctuation",
+        $: ":where(span)",
+        color: { "": null, "@own(syntax-punctuation)": "#syntax-punctuation" },
       },
       Keyword: {
-        $: ":where(.td-syntax-keyword)",
-        color: "#syntax-keyword",
+        $: ":where(span)",
+        color: { "": null, "@own(syntax-keyword)": "#syntax-keyword" },
       },
       String: {
-        $: ":where(.td-syntax-string)",
-        color: "#syntax-string",
+        $: ":where(span)",
+        color: { "": null, "@own(syntax-string)": "#syntax-string" },
       },
       Token: {
-        $: ":where(.td-syntax-token)",
-        color: "#syntax-token",
+        $: ":where(span)",
+        color: { "": null, "@own(syntax-token)": "#syntax-token" },
       },
       Property: {
-        $: ":where(.td-syntax-property)",
-        color: "#syntax-property",
+        $: ":where(span)",
+        color: { "": null, "@own(syntax-property)": "#syntax-property" },
       },
       Number: {
-        $: ":where(.td-syntax-number)",
-        color: "#syntax-number",
+        $: ":where(span)",
+        color: { "": null, "@own(syntax-number)": "#syntax-number" },
       },
       Function: {
-        $: ":where(.td-syntax-function)",
-        color: "#syntax-function",
+        $: ":where(span)",
+        color: { "": null, "@own(syntax-function)": "#syntax-function" },
       },
       Value: {
-        $: ":where(.td-syntax-value)",
-        color: "#syntax-value",
+        $: ":where(span)",
+        color: { "": null, "@own(syntax-value)": "#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" },
+        $: ":where(span)",
+        color: { "": null, "@own(syntax-operator)": "#syntax-operator" },
+      },
+      Text: {
+        $: ":where(span)",
+        color: { "": null, "@own(syntax-text)": "#syntax-text" },
+      },
+      Bg: {
+        $: ":where(span)",
+        fill: { "": null, "@own(syntax-bg)": "#syntax-bg" },
+      },
+      Inserted: {
+        $: ":where(span)",
+        color: { "": null, "@own(green-text)": "#green-text" },
+      },
+      Deleted: {
+        $: ":where(span)",
+        color: { "": null, "@own(red-text)": "#red-text" },
+      },
+      Italic: {
+        $: ":where(span)",
+        preset: { "": null, "@own(syntax-italic)": "italic" },
+      },
+      Strong: {
+        $: ":where(span)",
+        preset: { "": null, "@own(syntax-strong)": "strong" },
+      },
       Underline: {
-        $: ":where(.td-syntax-underline)",
-        textDecoration: "underline",
+        $: ":where(span)",
+        textDecoration: { "": null, "@own(syntax-underline)": "underline" },
       },
     }),
   );

package/dist/components/TableOfContents.styles.js

@@ -8,7 +8,7 @@ export const TableOfContentsRoot = defineComponent("TableOfContents", {
   "data-element": "TableOfContents",
   styles: {
     display: "block",
-    hide: { "": false, "@narrow-layout": true },
+    hide: { "": false, "!@lg": true },
     blockPadding: "($gap * 4) start",
     inlinePadding: "$docs-sidebar-pad-x",
     Heading: {

package/dist/components/TableOfContentsLayout.styles.js

@@ -12,25 +12,25 @@ export const TableOfContentsLayoutRoot = defineComponent(
       display: { "": "", ":has(cookbook-mobile-toc)": "block" },
       hide: {
         "": false,
-        "@narrow-layout": true,
+        "!@lg": true,
         ":has(cookbook-mobile-toc)": false,
       },
-      order: { "": "2", "@narrow-layout": "0" },
+      order: { "": "2", "!@lg": "0" },
       position: "relative",
       inlineSize: {
         "": "max($sidebar-width, calc($sidebar-width + (100% - $content-width - $sidebar-width) / 2))",
-        "@narrow-layout": "100%",
+        "!@lg": "100%",
       },
       Content: {
-        $: ".right-sidebar",
-        position: { "": "sticky", "@narrow-layout": "static" },
+        $: "Content",
+        position: { "": "sticky", "!@lg": "static" },
         blockInset: "$docs-nav-height start",
         inlineSize: "100%",
         blockSize: {
           "": "(100vh - $docs-nav-height)",
-          "@narrow-layout": "auto",
+          "!@lg": "auto",
         },
-        overflowY: { "": "auto", "@narrow-layout": "visible" },
+        overflowY: { "": "auto", "!@lg": "visible" },
         scrollbar: "none",
       },
     },

package/dist/components/ThemeSelect.styles.js

@@ -16,11 +16,11 @@ export const ThemeSelectRoot = defineComponent("ThemeSelect", {
       placeItems: "center",
       inlineSize: {
         "": "$control-height",
-        "@mobile": "$docs-menu-button-size",
+        "!@md": "$docs-menu-button-size",
       },
       blockSize: {
         "": "$control-height",
-        "@mobile": "$docs-menu-button-size",
+        "!@md": "$docs-menu-button-size",
       },
       padding: "0",
       color: "#text-soft",
@@ -33,11 +33,11 @@ export const ThemeSelectRoot = defineComponent("ThemeSelect", {
       $: "> button",
       color: {
         "": null,
-        "@own(:hover) | :has([popover]:popover-open)": "#text",
+        "@own(:hover) | :has([popover]:is(:popover-open))": "#text",
       },
       fill: {
         "": null,
-        "@own(:hover) | :has([popover]:popover-open)": "#surface-2-hover",
+        "@own(:hover) | :has([popover]:is(:popover-open))": "#surface-2-hover",
       },
     },
     ActiveTrigger: {
@@ -48,14 +48,14 @@ export const ThemeSelectRoot = defineComponent("ThemeSelect", {
     Icon: {
       $: "> button svg",
       display: "block",
-      inlineSize: { "": "1.25rem", "@mobile": "1.125rem" },
-      blockSize: { "": "1.25rem", "@mobile": "1.125rem" },
+      inlineSize: { "": "1.25rem", "!@md": "1.125rem" },
+      blockSize: { "": "1.25rem", "!@md": "1.125rem" },
     },
     Panel: {
       $: "Panel",
       position: "fixed",
       inset: "auto",
-      blockInset: { "": "4rem start", "@mobile": "3.5rem start" },
+      blockInset: { "": "4rem start", "!@md": "3.5rem start" },
       inlineInset:
         "max($docs-nav-pad-x, ((100vw - $layout-width) / 2 + $docs-sidebar-pad-x)) end",
       inlineSize: "min(15rem, calc(100vw - 2 * $docs-nav-pad-x))",
@@ -81,9 +81,9 @@ export const ThemeSelectRoot = defineComponent("ThemeSelect", {
       $: '[data-element="Panel"]',
       opacity: {
         "": null,
-        "@own(@popover-open & [data-open])": "1",
+        "@own(:is(:popover-open) & [data-open])": "1",
       },
-      scale: { "": null, "@own(@popover-open & [data-open])": "1" },
+      scale: { "": null, "@own(:is(:popover-open) & [data-open])": "1" },
     },
     Section: {
       $: "fieldset",
@@ -164,15 +164,15 @@ export const ThemeSelectRoot = defineComponent("ThemeSelect", {
       $: "label > svg",
       inlineMargin: {
         "": null,
-        "@own(:is(label > svg:last-child))": "auto start",
+        "@own(:last-child)": "auto start",
       },
-      visibility: { "": null, "@own(:is(label > svg:last-child))": "hidden" },
+      visibility: { "": null, "@own(:last-child)": "hidden" },
     },
     SelectedCheckmark: {
       $: "label > svg",
       visibility: {
         "": null,
-        "@own(:is(label:has(input:checked) > svg:last-child))": "visible",
+        "@own(:last-child & :is(:has(input:checked) >))": "visible",
       },
     },
   },

package/dist/components/TopNavigation.styles.js

@@ -8,7 +8,7 @@ export const TopNavigationRoot = defineComponent("TopNavigation", {
   "data-element": "TopNavigation",
   styles: {
     display: "flex",
-    hide: { "": false, "@mobile": true },
+    hide: { "": false, "!@md": true },
     alignItems: "stretch",
     gap: "clamp(1.25rem, 2.5vw, 2.5rem)",
     inlineSize: "100%",

package/dist/components/VersionSwitcher.styles.js

@@ -38,7 +38,7 @@ export const VersionSwitcherRoot = defineComponent("VersionSwitcher", {
       blockInset: "(anchor(bottom) + $gap) start, auto end",
       inlineInset: {
         "": "anchor(left) start, auto end",
-        "@mobile": "auto start, anchor(right) end",
+        "!@md": "auto start, anchor(right) end",
       },
     },
   },

package/dist/components/select-popover-styles.js

@@ -21,21 +21,21 @@ export function selectPopoverStyles({
       $: "> button",
       color: {
         "": null,
-        "@own(:hover) | :has([popover]:popover-open)": "#text",
+        "@own(:hover) | :has([popover]:is(:popover-open))": "#text",
       },
       fill: {
         "": null,
-        "@own(:hover) | :has([popover]:popover-open)": "#surface-2-hover",
+        "@own(:hover) | :has([popover]:is(:popover-open))": "#surface-2-hover",
       },
     },
     TriggerLabel: {
-      $: ".trigger-label",
+      $: "TriggerLabel",
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap",
     },
     Caret: {
-      $: "> button > .caret",
+      $: "> button > Caret",
       flexShrink: "0",
       inlineSize: "0.875rem",
       blockSize: "0.875rem",
@@ -67,12 +67,12 @@ export function selectPopoverStyles({
       $: '> [data-element="Panel"]',
       opacity: {
         "": null,
-        "@own(@popover-open & [data-open])": "1",
+        "@own(:is(:popover-open) & [data-open])": "1",
       },
-      scale: { "": null, "@own(@popover-open & [data-open])": "1" },
+      scale: { "": null, "@own(:is(:popover-open) & [data-open])": "1" },
     },
     PanelTitle: {
-      $: ".panel-title",
+      $: "PanelTitle",
       padding: "($gap * 0.75) $gap",
       color: "#text-muted",
       preset: "small / strong",
@@ -92,22 +92,22 @@ export function selectPopoverStyles({
     },
     [hoverOption]: {
       $: "nav a",
-      color: { "": null, "@own(:is(nav a:hover))": "#text" },
-      fill: { "": null, "@own(:is(nav a:hover))": "#surface-2-hover" },
+      color: { "": null, "@own(:hover)": "#text" },
+      fill: { "": null, "@own(:hover)": "#surface-2-hover" },
     },
     [currentOption]: {
       $: "nav a",
       color: {
         "": null,
-        '@own(:is(nav a[aria-current="page"]))': "#accent-text",
+        '@own([aria-current="page"])': "#accent-text",
       },
       fill: {
         "": null,
-        '@own(:is(nav a[aria-current="page"]))': "#accent-surface-2-subtle",
+        '@own([aria-current="page"])': "#accent-surface-2-subtle",
       },
     },
     Checkmark: {
-      $: "nav a > .checkmark",
+      $: "nav a > Checkmark",
       flexShrink: "0",
       inlineMargin: "auto start",
       inlineSize: "1rem",
@@ -115,10 +115,10 @@ export function selectPopoverStyles({
       visibility: "hidden",
     },
     SelectedCheckmark: {
-      $: "nav a > .checkmark",
+      $: "nav a > [data-element=Checkmark]",
       visibility: {
         "": null,
-        '@own(:is(nav a[aria-current="page"] > .checkmark))': "visible",
+        '@own(:is([aria-current="page"] >))': "visible",
       },
     },
   };

package/dist/components/tasty-states.js

@@ -13,16 +13,17 @@ export const cookbookStates = {
   "@system-dark": systemDark,
   "@light": `@root(theme=light) | (!@root(theme) & ${systemLight})`,
   "@dark": `@root(theme=dark) | (!@root(theme) & ${systemDark})`,
-  "@mobile": "@media(w < 50rem)",
-  "@desktop": "@media(w >= 50rem)",
-  "@small": "@media(w <= 40rem)",
-  "@compact": "@media(w <= 23rem)",
-  "@shell-mobile": "@media(w <= 48rem)",
-  "@shell-desktop": "@media(w > 48rem)",
-  "@narrow-layout": "@media(w < 72rem)",
-  "@medium-layout": "@media(w >= 50rem) & @media(w < 72rem)",
+  "@sm": "@media(w > 40rem)",
+  "@md": "@media(w >= 50rem)",
+  "@lg": "@media(w >= 72rem)",
   "@reduced-motion": "@media(prefers-reduced-motion: reduce)",
-  "@popover-open": ":is(:popover-open)",
+  // Check each selected element's ancestry so isolated sections do not affect
+  // surrounding prose in the same Markdown root.
+  "@prose": "@own(!:is([data-not-content] *))",
+  "@prose-block":
+    "@own(!:is([data-not-content] *)) & (@own(block) | @own(!:is(a,strong,em,del,span,input,code,br,li,dt,dd))) & (@own(:is(:not(a,strong,em,del,span,input,code,br) + *)) | @own(:is([data-block] + *)))",
+  "@prose-heading":
+    "@own(!:is([data-not-content] *)) & @own(!:is(h1 + *,h2 + *,h3 + *,h4 + *,h5 + *,h6 + *,[data-heading] + *))",
 };
 
 let configured = false;

package/dist/eslint-plugin.js

@@ -126,16 +126,13 @@ var tasty_config_default = {
 		"@system-dark",
 		"@light",
 		"@dark",
-		"@mobile",
-		"@desktop",
-		"@small",
-		"@compact",
-		"@shell-mobile",
-		"@shell-desktop",
-		"@narrow-layout",
-		"@medium-layout",
+		"@sm",
+		"@md",
+		"@lg",
 		"@reduced-motion",
-		"@popover-open"
+		"@prose",
+		"@prose-block",
+		"@prose-heading"
 	],
 	presets: [
 		"body",

package/dist/eslint-plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"eslint-plugin.js","names":["validationConfig"],"sources":["../src/tasty.config.ts","../src/eslint-plugin.ts"],"sourcesContent":["import type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\n\nexport default {\n  importSources: [\n    \"@tenphi/cookbook/styling\",\n    \"@tenphi/renderer/styling\",\n    \"./component-styles.js\",\n    \"../define-component.js\",\n  ],\n  styleFunctions: {\n    defineComponent: { argument: 1, kind: \"options\" },\n    extendComponent: { argument: 2, kind: \"options\", partial: true },\n    resolveComponentStyles: { argument: 1, kind: \"styles\" },\n    mergeStyles: { argument: \"all\", kind: \"styles\", partial: true },\n  },\n  tokens: [\n    \"$gap\",\n    \"$margin-block-start\",\n    \"$margin-block-end\",\n    \"$padding-block-start\",\n    \"$padding-block-end\",\n    \"$radius\",\n    \"$header-control-radius\",\n    \"$card-radius\",\n    \"$border-width\",\n    \"$outline-width\",\n    \"$outline-offset\",\n    \"$layout-width\",\n    \"$content-width\",\n    \"$sidebar-width\",\n    \"$control-height\",\n    \"$transition\",\n    \"$sharp-radius\",\n    \"$bold-font-weight\",\n    \"#white\",\n    \"#black\",\n    \"#clear\",\n    \"#current\",\n    \"#surface\",\n    \"#header\",\n    \"#heading\",\n    \"#surface-2\",\n    \"#surface-3\",\n    \"#surface-2-hover\",\n    \"#surface-2-pressed\",\n    \"#surface-3-hover\",\n    \"#surface-3-pressed\",\n    \"#text\",\n    \"#text-soft\",\n    \"#text-muted\",\n    \"#sidebar-text\",\n    \"#border\",\n    \"#border-strong\",\n    \"#accent-text\",\n    \"#accent-surface\",\n    \"#accent-surface-text\",\n    \"#logo-surface\",\n    \"#logo-mark\",\n    \"#accent-surface-subtle\",\n    \"#accent-surface-2-subtle\",\n    \"#focus\",\n    \"#shadow\",\n    \"#overlay\",\n    \"#syntax-bg\",\n    \"#syntax-text\",\n    \"#syntax-comment\",\n    \"#syntax-punctuation\",\n    \"#syntax-keyword\",\n    \"#syntax-string\",\n    \"#syntax-token\",\n    \"#syntax-property\",\n    \"#syntax-number\",\n    \"#syntax-function\",\n    \"#syntax-value\",\n    \"#syntax-operator\",\n    \"#info\",\n    \"#info-surface\",\n    \"#info-text\",\n    \"#success\",\n    \"#success-surface\",\n    \"#success-text\",\n    \"#warning\",\n    \"#warning-surface\",\n    \"#warning-text\",\n    \"#danger\",\n    \"#danger-surface\",\n    \"#danger-text\",\n    \"#orange-surface\",\n    \"#orange\",\n    \"#orange-text\",\n    \"#green-surface\",\n    \"#green\",\n    \"#green-text\",\n    \"#blue-surface\",\n    \"#blue\",\n    \"#blue-text\",\n    \"#purple-surface\",\n    \"#purple\",\n    \"#purple-text\",\n    \"#red-surface\",\n    \"#red\",\n    \"#red-text\",\n  ],\n  units: [\"x\", \"r\", \"cr\", \"bw\"],\n  states: [\n    \"@system-light\",\n    \"@system-dark\",\n    \"@light\",\n    \"@dark\",\n    \"@mobile\",\n    \"@desktop\",\n    \"@small\",\n    \"@compact\",\n    \"@shell-mobile\",\n    \"@shell-desktop\",\n    \"@narrow-layout\",\n    \"@medium-layout\",\n    \"@reduced-motion\",\n    \"@popover-open\",\n  ],\n  presets: [\n    \"body\",\n    \"heading\",\n    \"h1\",\n    \"h2\",\n    \"h3\",\n    \"h4\",\n    \"h5\",\n    \"h6\",\n    \"navigation\",\n    \"small\",\n    \"code\",\n    \"hero-title\",\n    \"hero-tagline\",\n    \"prose\",\n    \"inline-code\",\n  ],\n} satisfies TastyValidationConfig;\n","export { default, recommended, strict } from \"@tenphi/eslint-plugin-tasty\";\nexport type {\n  ResolvedConfig,\n  StyleFunctionConfig,\n  TastyValidationConfig,\n} from \"@tenphi/eslint-plugin-tasty\";\nexport { default as validationConfig } from \"./tasty.config.js\";\n\nimport type { ThemeConfig } from \"@tenphi/docs\";\nimport type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\nimport validationConfig from \"./tasty.config.js\";\n\n/** Keep editor/linter names aligned with a Cookbook theme. */\nexport function createValidationConfig(\n  theme: ThemeConfig = {},\n): TastyValidationConfig {\n  return {\n    ...validationConfig,\n    tokens: [\n      ...validationConfig.tokens,\n      ...Object.keys(theme.tokens ?? {}),\n      ...Object.keys(theme.palette ?? {}).map((name) => `#${name}`),\n    ],\n    units: [...validationConfig.units, ...Object.keys(theme.units ?? {})],\n    states: [...validationConfig.states, ...Object.keys(theme.states ?? {})],\n    presets: [...validationConfig.presets, ...Object.keys(theme.presets ?? {})],\n    recipes: Object.keys(theme.recipes ?? {}),\n  };\n}\n"],"mappings":";;AAEA,IAAA,uBAAe;CACb,eAAe;EACb;EACA;EACA;EACA;CACF;CACA,gBAAgB;EACd,iBAAiB;GAAE,UAAU;GAAG,MAAM;EAAU;EAChD,iBAAiB;GAAE,UAAU;GAAG,MAAM;GAAW,SAAS;EAAK;EAC/D,wBAAwB;GAAE,UAAU;GAAG,MAAM;EAAS;EACtD,aAAa;GAAE,UAAU;GAAO,MAAM;GAAU,SAAS;EAAK;CAChE;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,OAAO;EAAC;EAAK;EAAK;EAAM;CAAI;CAC5B,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF;;;;AC5HA,SAAgB,uBACd,QAAqB,CAAC,GACC;CACvB,OAAO;EACL,GAAGA;EACH,QAAQ;GACN,GAAGA,qBAAiB;GACpB,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC;GACjC,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,MAAM;EAC9D;EACA,OAAO,CAAC,GAAGA,qBAAiB,OAAO,GAAG,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,CAAC;EACpE,QAAQ,CAAC,GAAGA,qBAAiB,QAAQ,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC,CAAC;EACvE,SAAS,CAAC,GAAGA,qBAAiB,SAAS,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC;EAC1E,SAAS,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC;CAC1C;AACF"}
+{"version":3,"file":"eslint-plugin.js","names":["validationConfig"],"sources":["../src/tasty.config.ts","../src/eslint-plugin.ts"],"sourcesContent":["import type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\n\nexport default {\n  importSources: [\n    \"@tenphi/cookbook/styling\",\n    \"@tenphi/renderer/styling\",\n    \"./component-styles.js\",\n    \"../define-component.js\",\n  ],\n  styleFunctions: {\n    defineComponent: { argument: 1, kind: \"options\" },\n    extendComponent: { argument: 2, kind: \"options\", partial: true },\n    resolveComponentStyles: { argument: 1, kind: \"styles\" },\n    mergeStyles: { argument: \"all\", kind: \"styles\", partial: true },\n  },\n  tokens: [\n    \"$gap\",\n    \"$margin-block-start\",\n    \"$margin-block-end\",\n    \"$padding-block-start\",\n    \"$padding-block-end\",\n    \"$radius\",\n    \"$header-control-radius\",\n    \"$card-radius\",\n    \"$border-width\",\n    \"$outline-width\",\n    \"$outline-offset\",\n    \"$layout-width\",\n    \"$content-width\",\n    \"$sidebar-width\",\n    \"$control-height\",\n    \"$transition\",\n    \"$sharp-radius\",\n    \"$bold-font-weight\",\n    \"#white\",\n    \"#black\",\n    \"#clear\",\n    \"#current\",\n    \"#surface\",\n    \"#header\",\n    \"#heading\",\n    \"#surface-2\",\n    \"#surface-3\",\n    \"#surface-2-hover\",\n    \"#surface-2-pressed\",\n    \"#surface-3-hover\",\n    \"#surface-3-pressed\",\n    \"#text\",\n    \"#text-soft\",\n    \"#text-muted\",\n    \"#sidebar-text\",\n    \"#border\",\n    \"#border-strong\",\n    \"#accent-text\",\n    \"#accent-surface\",\n    \"#accent-surface-text\",\n    \"#logo-surface\",\n    \"#logo-mark\",\n    \"#accent-surface-subtle\",\n    \"#accent-surface-2-subtle\",\n    \"#focus\",\n    \"#shadow\",\n    \"#overlay\",\n    \"#syntax-bg\",\n    \"#syntax-text\",\n    \"#syntax-comment\",\n    \"#syntax-punctuation\",\n    \"#syntax-keyword\",\n    \"#syntax-string\",\n    \"#syntax-token\",\n    \"#syntax-property\",\n    \"#syntax-number\",\n    \"#syntax-function\",\n    \"#syntax-value\",\n    \"#syntax-operator\",\n    \"#info\",\n    \"#info-surface\",\n    \"#info-text\",\n    \"#success\",\n    \"#success-surface\",\n    \"#success-text\",\n    \"#warning\",\n    \"#warning-surface\",\n    \"#warning-text\",\n    \"#danger\",\n    \"#danger-surface\",\n    \"#danger-text\",\n    \"#orange-surface\",\n    \"#orange\",\n    \"#orange-text\",\n    \"#green-surface\",\n    \"#green\",\n    \"#green-text\",\n    \"#blue-surface\",\n    \"#blue\",\n    \"#blue-text\",\n    \"#purple-surface\",\n    \"#purple\",\n    \"#purple-text\",\n    \"#red-surface\",\n    \"#red\",\n    \"#red-text\",\n  ],\n  units: [\"x\", \"r\", \"cr\", \"bw\"],\n  states: [\n    \"@system-light\",\n    \"@system-dark\",\n    \"@light\",\n    \"@dark\",\n    \"@sm\",\n    \"@md\",\n    \"@lg\",\n    \"@reduced-motion\",\n    \"@prose\",\n    \"@prose-block\",\n    \"@prose-heading\",\n  ],\n  presets: [\n    \"body\",\n    \"heading\",\n    \"h1\",\n    \"h2\",\n    \"h3\",\n    \"h4\",\n    \"h5\",\n    \"h6\",\n    \"navigation\",\n    \"small\",\n    \"code\",\n    \"hero-title\",\n    \"hero-tagline\",\n    \"prose\",\n    \"inline-code\",\n  ],\n} satisfies TastyValidationConfig;\n","export { default, recommended, strict } from \"@tenphi/eslint-plugin-tasty\";\nexport type {\n  ResolvedConfig,\n  StyleFunctionConfig,\n  TastyValidationConfig,\n} from \"@tenphi/eslint-plugin-tasty\";\nexport { default as validationConfig } from \"./tasty.config.js\";\n\nimport type { ThemeConfig } from \"@tenphi/docs\";\nimport type { TastyValidationConfig } from \"@tenphi/eslint-plugin-tasty\";\nimport validationConfig from \"./tasty.config.js\";\n\n/** Keep editor/linter names aligned with a Cookbook theme. */\nexport function createValidationConfig(\n  theme: ThemeConfig = {},\n): TastyValidationConfig {\n  return {\n    ...validationConfig,\n    tokens: [\n      ...validationConfig.tokens,\n      ...Object.keys(theme.tokens ?? {}),\n      ...Object.keys(theme.palette ?? {}).map((name) => `#${name}`),\n    ],\n    units: [...validationConfig.units, ...Object.keys(theme.units ?? {})],\n    states: [...validationConfig.states, ...Object.keys(theme.states ?? {})],\n    presets: [...validationConfig.presets, ...Object.keys(theme.presets ?? {})],\n    recipes: Object.keys(theme.recipes ?? {}),\n  };\n}\n"],"mappings":";;AAEA,IAAA,uBAAe;CACb,eAAe;EACb;EACA;EACA;EACA;CACF;CACA,gBAAgB;EACd,iBAAiB;GAAE,UAAU;GAAG,MAAM;EAAU;EAChD,iBAAiB;GAAE,UAAU;GAAG,MAAM;GAAW,SAAS;EAAK;EAC/D,wBAAwB;GAAE,UAAU;GAAG,MAAM;EAAS;EACtD,aAAa;GAAE,UAAU;GAAO,MAAM;GAAU,SAAS;EAAK;CAChE;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,OAAO;EAAC;EAAK;EAAK;EAAM;CAAI;CAC5B,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF;;;;ACzHA,SAAgB,uBACd,QAAqB,CAAC,GACC;CACvB,OAAO;EACL,GAAGA;EACH,QAAQ;GACN,GAAGA,qBAAiB;GACpB,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC;GACjC,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,SAAS,IAAI,MAAM;EAC9D;EACA,OAAO,CAAC,GAAGA,qBAAiB,OAAO,GAAG,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,CAAC;EACpE,QAAQ,CAAC,GAAGA,qBAAiB,QAAQ,GAAG,OAAO,KAAK,MAAM,UAAU,CAAC,CAAC,CAAC;EACvE,SAAS,CAAC,GAAGA,qBAAiB,SAAS,GAAG,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC;EAC1E,SAAS,OAAO,KAAK,MAAM,WAAW,CAAC,CAAC;CAC1C;AACF"}

package/dist/index.js

@@ -4,7 +4,7 @@ import { DEFAULT_THEME_TOKENS, DEFAULT_TYPOGRAPHY_PRESETS, resolveThemeTokens, r
 import { configureCodeHighlighting, cookbookShikiConfig } from "./theme/shiki-theme.js";
 import { TASTY_SPACING_PROPERTIES, TASTY_UNITS, tastyTokens } from "./theme/tasty-config.js";
 import { r as unusedCustomStyleNames, t as configureComponentStyles } from "./component-styles-DstqPFf3.js";
-import { n as cookbookStates } from "./tasty-states-_JhxFdK1.js";
+import { n as cookbookStates } from "./tasty-states-BIgiJQ3N.js";
 import { agentPagePath } from "./page-metadata.js";
 import { createRequire } from "node:module";
 import { cp, mkdir, readFile, readdir, rename, stat, unlink, writeFile } from "node:fs/promises";
@@ -238,7 +238,7 @@ function replaceMermaidCodeBlocks(parent) {
 	}
 }
 function renderMermaidElement(source) {
-	return `<div class="td-mermaid" data-mermaid-state="ready">${accessibleSvg(render(source), source)}</div>`;
+	return `<div class="td-mermaid" data-element="Mermaid" data-mermaid-state="ready">${accessibleSvg(render(source), source)}</div>`;
 }
 function isMermaidCodeBlock(node) {
 	if (node.type !== "element" || node.tagName !== "pre") return false;
@@ -258,7 +258,7 @@ function render(source) {
 		border: "var(--border-strong-color)",
 		font: "var(--body-font-family)",
 		transparent: true
-	}).replace(svgStyleBlock, "").replace(/(<svg\b[^>]*?)\sstyle="[^"]*"/, "$1");
+	}).replace(svgStyleBlock, "").replace(/\sclass="([^"]*)"/g, (_, names) => names.split(/\s+/).includes("mono") ? " data-mono=\"\"" : "").replace(/(<svg\b[^>]*?)\sstyle="[^"]*"/, "$1");
 }
 function accessibleSvg(svg, source) {
 	const title = directive(source, "accTitle") ?? "Diagram";
@@ -345,13 +345,15 @@ function alert(blockquote) {
 		type: "element",
 		tagName: "aside",
 		properties: {
-			className: ["cookbook-alert", `cookbook-alert--${kind}`],
+			className: ["cookbook-alert"],
+			dataElement: "MarkdownAlert",
+			[`data-${kind}`]: "",
 			ariaLabel: title
 		},
 		children: [{
 			type: "element",
 			tagName: "p",
-			properties: { className: ["cookbook-alert__title"] },
+			properties: { dataElement: "Title" },
 			children: [{
 				type: "text",
 				value: title
@@ -359,14 +361,14 @@ function alert(blockquote) {
 		}, {
 			type: "element",
 			tagName: "div",
-			properties: { className: ["cookbook-alert__content"] },
+			properties: { dataElement: "Content" },
 			children: body
 		}]
 	};
 }
 //#endregion
 //#region src/markdown/rehype-table-scroll.ts
-const containerClass = "td-table-scroll";
+const containerElement = "Scroll";
 /** Wrap Markdown tables in a dedicated horizontal scroll container. */
 function rehypeTableScroll() {
 	return (tree) => {
@@ -397,13 +399,12 @@ function scrollContainer(table) {
 	return {
 		type: "element",
 		tagName: "div",
-		properties: { className: [containerClass] },
+		properties: { dataElement: containerElement },
 		children: [table]
 	};
 }
 function isScrollContainer(node) {
-	const className = node.properties?.className;
-	return node.type === "element" && node.tagName === "div" && Array.isArray(className) && className.includes(containerClass);
+	return node.type === "element" && node.tagName === "div" && node.properties?.dataElement === containerElement;
 }
 //#endregion
 //#region src/markdown/rehype-page-affordances.ts
@@ -442,9 +443,11 @@ function isOrdinaryCodeBlock(node) {
 	return (node.properties?.dataLanguage ?? node.properties?.["data-language"]) !== "mermaid" && node.children?.[0]?.tagName === "code";
 }
 function codeBlockWithCopy(pre) {
+	const language = pre.properties?.dataLanguage ?? pre.properties?.["data-language"];
 	return element("cookbook-code-block", {
 		className: ["td-code-block"],
-		dataElement: "MarkdownCodeBlock"
+		dataElement: "MarkdownCodeBlock",
+		dataDiff: language === "diff" || language === "patch" ? "" : void 0
 	}, [pre, element("button", {
 		type: "button",
 		dataElement: "CopyButton",