@tenphi/renderer 0.22.1 → 0.24.0

package/dist/markdown/rendered-content.js

@@ -1,5 +1,5 @@
 //#region src/markdown/rendered-content.ts
-const headingPattern = /<div\b[^>]*\bclass=["'][^"']*\bcookbook-heading-wrapper\b[^"']*["'][^>]*>[\s\S]*?<\/div>|<h([1-6])\b([^>]*)>([\s\S]*?)<\/h\1>/gi;
+const headingPattern = /<div\b[^>]*\bdata-element=["']MarkdownHeading["'][^>]*>[\s\S]*?<\/div>|<h([1-6])\b([^>]*)>([\s\S]*?)<\/h\1>/gi;
 const idPattern = /\sid=(['"])(.*?)\1/i;
 const tags = /<[^>]*>/g;
 /** Wrap rendered headings with a visible, accessible permalink. */
@@ -9,7 +9,7 @@ function addHeadingPermalinks(html) {
 		const id = idPattern.exec(attributes)?.[2];
 		if (!id) return heading;
 		const title = escapeAttribute(decodeEntities(content.replace(tags, "").trim()));
-		return `<div class="cookbook-heading-wrapper level-h${level}">${heading}<a class="cookbook-anchor-link" href="#${escapeAttribute(id)}" aria-label="Permalink to “${title}”"><span class="cookbook-anchor-icon" aria-hidden="true">#</span></a></div>`;
+		return `<div class="cookbook-heading-wrapper" data-element="MarkdownHeading" data-heading="" data-level="h${level}">${heading}<a data-element="Anchor" href="#${escapeAttribute(id)}" aria-label="Permalink to “${title}”"><span data-element="AnchorIcon" aria-hidden="true">#</span></a></div>`;
 	});
 }
 function decodeEntities(value) {

package/dist/markdown/rendered-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"rendered-content.js","names":[],"sources":["../../src/markdown/rendered-content.ts"],"sourcesContent":["const headingPattern =\n  /<div\\b[^>]*\\bclass=[\"'][^\"']*\\bcookbook-heading-wrapper\\b[^\"']*[\"'][^>]*>[\\s\\S]*?<\\/div>|<h([1-6])\\b([^>]*)>([\\s\\S]*?)<\\/h\\1>/gi;\nconst idPattern = /\\sid=(['\"])(.*?)\\1/i;\nconst tags = /<[^>]*>/g;\n\n/** Wrap rendered headings with a visible, accessible permalink. */\nexport function addHeadingPermalinks(html: string): string {\n  return html.replace(\n    headingPattern,\n    (\n      heading,\n      level: string | undefined,\n      attributes: string | undefined,\n      content: string | undefined,\n    ) => {\n      // Consume an existing heading wrapper unchanged so its inner heading\n      // is not matched and wrapped a second time.\n      if (!level || attributes === undefined || content === undefined) {\n        return heading;\n      }\n      const id = idPattern.exec(attributes)?.[2];\n      if (!id) return heading;\n      const title = escapeAttribute(\n        decodeEntities(content.replace(tags, \"\").trim()),\n      );\n      return `<div class=\"cookbook-heading-wrapper level-h${level}\">${heading}<a class=\"cookbook-anchor-link\" href=\"#${escapeAttribute(id)}\" aria-label=\"Permalink to “${title}”\"><span class=\"cookbook-anchor-icon\" aria-hidden=\"true\">#</span></a></div>`;\n    },\n  );\n}\n\nfunction decodeEntities(value: string): string {\n  const named: Record<string, string> = {\n    amp: \"&\",\n    apos: \"'\",\n    gt: \">\",\n    lt: \"<\",\n    quot: '\"',\n  };\n  return value.replace(\n    /&(?:#(\\d+)|#x([\\da-f]+)|(amp|apos|gt|lt|quot));/gi,\n    (entity, decimal: string, hexadecimal: string, name: string) => {\n      const point = decimal\n        ? Number.parseInt(decimal, 10)\n        : hexadecimal\n          ? Number.parseInt(hexadecimal, 16)\n          : undefined;\n      return point === undefined\n        ? (named[name.toLowerCase()] ?? entity)\n        : String.fromCodePoint(point);\n    },\n  );\n}\n\nfunction escapeAttribute(value: string): string {\n  return value\n    .replaceAll(\"&\", \"&amp;\")\n    .replaceAll('\"', \"&quot;\")\n    .replaceAll(\"'\", \"&#39;\")\n    .replaceAll(\"<\", \"&lt;\")\n    .replaceAll(\">\", \"&gt;\");\n}\n"],"mappings":";AAAA,MAAM,iBACJ;AACF,MAAM,YAAY;AAClB,MAAM,OAAO;;AAGb,SAAgB,qBAAqB,MAAsB;CACzD,OAAO,KAAK,QACV,iBAEE,SACA,OACA,YACA,YACG;EAGH,IAAI,CAAC,SAAS,eAAe,KAAA,KAAa,YAAY,KAAA,GACpD,OAAO;EAET,MAAM,KAAK,UAAU,KAAK,UAAU,CAAC,GAAG;EACxC,IAAI,CAAC,IAAI,OAAO;EAChB,MAAM,QAAQ,gBACZ,eAAe,QAAQ,QAAQ,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,CACjD;EACA,OAAO,+CAA+C,MAAM,IAAI,QAAQ,yCAAyC,gBAAgB,EAAE,EAAE,8BAA8B,MAAM;CAC3K,CACF;AACF;AAEA,SAAS,eAAe,OAAuB;CAC7C,MAAM,QAAgC;EACpC,KAAK;EACL,MAAM;EACN,IAAI;EACJ,IAAI;EACJ,MAAM;CACR;CACA,OAAO,MAAM,QACX,sDACC,QAAQ,SAAiB,aAAqB,SAAiB;EAC9D,MAAM,QAAQ,UACV,OAAO,SAAS,SAAS,EAAE,IAC3B,cACE,OAAO,SAAS,aAAa,EAAE,IAC/B,KAAA;EACN,OAAO,UAAU,KAAA,IACZ,MAAM,KAAK,YAAY,MAAM,SAC9B,OAAO,cAAc,KAAK;CAChC,CACF;AACF;AAEA,SAAS,gBAAgB,OAAuB;CAC9C,OAAO,MACJ,WAAW,KAAK,OAAO,CAAC,CACxB,WAAW,MAAK,QAAQ,CAAC,CACzB,WAAW,KAAK,OAAO,CAAC,CACxB,WAAW,KAAK,MAAM,CAAC,CACvB,WAAW,KAAK,MAAM;AAC3B"}
+{"version":3,"file":"rendered-content.js","names":[],"sources":["../../src/markdown/rendered-content.ts"],"sourcesContent":["const headingPattern =\n  /<div\\b[^>]*\\bdata-element=[\"']MarkdownHeading[\"'][^>]*>[\\s\\S]*?<\\/div>|<h([1-6])\\b([^>]*)>([\\s\\S]*?)<\\/h\\1>/gi;\nconst idPattern = /\\sid=(['\"])(.*?)\\1/i;\nconst tags = /<[^>]*>/g;\n\n/** Wrap rendered headings with a visible, accessible permalink. */\nexport function addHeadingPermalinks(html: string): string {\n  return html.replace(\n    headingPattern,\n    (\n      heading,\n      level: string | undefined,\n      attributes: string | undefined,\n      content: string | undefined,\n    ) => {\n      // Consume an existing heading wrapper unchanged so its inner heading\n      // is not matched and wrapped a second time.\n      if (!level || attributes === undefined || content === undefined) {\n        return heading;\n      }\n      const id = idPattern.exec(attributes)?.[2];\n      if (!id) return heading;\n      const title = escapeAttribute(\n        decodeEntities(content.replace(tags, \"\").trim()),\n      );\n      return `<div class=\"cookbook-heading-wrapper\" data-element=\"MarkdownHeading\" data-heading=\"\" data-level=\"h${level}\">${heading}<a data-element=\"Anchor\" href=\"#${escapeAttribute(id)}\" aria-label=\"Permalink to “${title}”\"><span data-element=\"AnchorIcon\" aria-hidden=\"true\">#</span></a></div>`;\n    },\n  );\n}\n\nfunction decodeEntities(value: string): string {\n  const named: Record<string, string> = {\n    amp: \"&\",\n    apos: \"'\",\n    gt: \">\",\n    lt: \"<\",\n    quot: '\"',\n  };\n  return value.replace(\n    /&(?:#(\\d+)|#x([\\da-f]+)|(amp|apos|gt|lt|quot));/gi,\n    (entity, decimal: string, hexadecimal: string, name: string) => {\n      const point = decimal\n        ? Number.parseInt(decimal, 10)\n        : hexadecimal\n          ? Number.parseInt(hexadecimal, 16)\n          : undefined;\n      return point === undefined\n        ? (named[name.toLowerCase()] ?? entity)\n        : String.fromCodePoint(point);\n    },\n  );\n}\n\nfunction escapeAttribute(value: string): string {\n  return value\n    .replaceAll(\"&\", \"&amp;\")\n    .replaceAll('\"', \"&quot;\")\n    .replaceAll(\"'\", \"&#39;\")\n    .replaceAll(\"<\", \"&lt;\")\n    .replaceAll(\">\", \"&gt;\");\n}\n"],"mappings":";AAAA,MAAM,iBACJ;AACF,MAAM,YAAY;AAClB,MAAM,OAAO;;AAGb,SAAgB,qBAAqB,MAAsB;CACzD,OAAO,KAAK,QACV,iBAEE,SACA,OACA,YACA,YACG;EAGH,IAAI,CAAC,SAAS,eAAe,KAAA,KAAa,YAAY,KAAA,GACpD,OAAO;EAET,MAAM,KAAK,UAAU,KAAK,UAAU,CAAC,GAAG;EACxC,IAAI,CAAC,IAAI,OAAO;EAChB,MAAM,QAAQ,gBACZ,eAAe,QAAQ,QAAQ,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,CACjD;EACA,OAAO,qGAAqG,MAAM,IAAI,QAAQ,kCAAkC,gBAAgB,EAAE,EAAE,8BAA8B,MAAM;CAC1N,CACF;AACF;AAEA,SAAS,eAAe,OAAuB;CAC7C,MAAM,QAAgC;EACpC,KAAK;EACL,MAAM;EACN,IAAI;EACJ,IAAI;EACJ,MAAM;CACR;CACA,OAAO,MAAM,QACX,sDACC,QAAQ,SAAiB,aAAqB,SAAiB;EAC9D,MAAM,QAAQ,UACV,OAAO,SAAS,SAAS,EAAE,IAC3B,cACE,OAAO,SAAS,aAAa,EAAE,IAC/B,KAAA;EACN,OAAO,UAAU,KAAA,IACZ,MAAM,KAAK,YAAY,MAAM,SAC9B,OAAO,cAAc,KAAK;CAChC,CACF;AACF;AAEA,SAAS,gBAAgB,OAAuB;CAC9C,OAAO,MACJ,WAAW,KAAK,OAAO,CAAC,CACxB,WAAW,MAAK,QAAQ,CAAC,CACzB,WAAW,KAAK,OAAO,CAAC,CACxB,WAAW,KAAK,MAAM,CAAC,CACvB,WAAW,KAAK,MAAM;AAC3B"}

package/dist/overrides/Header.astro

@@ -50,7 +50,8 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 ---
 
 <HeaderRoot
-  className={`td-header${layout.tabs.length ? " td-header--with-tabs" : ""}`}
+  className="td-header"
+  data-with-tabs={layout.tabs.length ? "" : undefined}
   data-has-sidebar={Astro.locals.cookbookRoute.hasSidebar ? "" : undefined}
 >
   <div data-element="Primary">
@@ -93,28 +94,22 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
         />
       )
     }
-    <div data-element="Search" class="cookbook-print-hidden">
+    <div data-element="Search" data-print-hidden="">
       {shouldRenderSearch && <Search />}
     </div>
     <HeaderLinks />
-    <div
-      data-element="MobileTheme"
-      class="md:cookbook-hidden cookbook-print-hidden"
-    >
+    <div data-element="MobileTheme" data-print-hidden="">
       <ThemeSelect />
     </div>
     {
       !Astro.locals.cookbookRoute.hasSidebar &&
         Object.keys(content.locales ?? {}).length > 1 && (
-          <div data-element="MobileLanguage" class="cookbook-print-hidden">
+          <div data-element="MobileLanguage" data-print-hidden="">
             <LanguageSelect compact />
           </div>
         )
     }
-    <div
-      data-element="Tools"
-      class="cookbook-hidden md:cookbook-flex cookbook-print-hidden"
-    >
+    <div data-element="Tools" data-print-hidden="">
       <div data-element="Social"><SocialIcons /></div>
       <ThemeSelect />
       <LanguageSelect />
@@ -123,7 +118,8 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
   {
     layout.tabs.length > 0 && (
       <TopNavigationRoot
-        className="td-top-tabs cookbook-print-hidden"
+        className="td-top-tabs"
+        data-print-hidden=""
         aria-label={ui.primary}
       >
         {layout.tabs.map((tab, index) => (

package/dist/overrides/Hero.astro

@@ -49,20 +49,25 @@ if (image) {
       />
     )
   }
-  {rawHtml && <div class="hero-html" set:html={rawHtml} />}
-  <div class="stack">
-    <div class="copy">
+  {rawHtml && <div data-element="Visual" set:html={rawHtml} />}
+  <div data-element="Stack">
+    <div data-element="Copy">
       <h1 id="_top" data-page-title set:html={title} />
       {data.draft && <DraftContentNotice />}
-      {tagline && <div class="tagline" set:html={tagline} />}
+      {tagline && <div data-element="Tagline" set:html={tagline} />}
     </div>
     {
       actions.length > 0 && (
-        <div class="actions">
+        <div data-element="Actions">
           {actions.map(({ link: href, text, variant }) => (
             <a
               {href}
-              class:list={["cookbook-link-button", variant ?? "secondary"]}
+              data-element="Action"
+              data-primary={variant === "primary" ? "" : undefined}
+              data-secondary={
+                !variant || variant === "secondary" ? "" : undefined
+              }
+              data-minimal={variant === "minimal" ? "" : undefined}
             >
               {text}
             </a>

package/dist/overrides/MobileMenuFooter.astro

@@ -5,7 +5,7 @@ import { MobileMenuFooterRoot } from "../components/MobileMenuFooter.styles.js";
 ---
 
 <MobileMenuFooterRoot className="td-mobile-preferences">
-  <div class="td-mobile-preferences__social">
+  <div data-element="Social">
     <SocialIcons />
   </div>
   <LanguageSelect sidebar />

package/dist/overrides/MobileMenuToggle.astro

@@ -23,15 +23,16 @@ const section = layout.tabs[active]?.label;
 ---
 
 <MobileMenuToggleRoot
+  className="td-menu-button cookbook-menu-button"
   type="button"
   popovertarget="cookbook__sidebar"
   aria-controls="cookbook__sidebar"
   aria-expanded="false"
-  className="td-menu-button cookbook-menu-button cookbook-print-hidden"
+  data-print-hidden=""
 >
-  <Icon name="bars" class="open-menu" />
-  <span class="sr-only">{Astro.locals.t("menuButton.accessibleLabel")}</span>
-  {section && <span class="td-menu-button__section">{section}</span>}
+  <Icon name="bars" data-element="Icon" />
+  <span data-sr-only="">{Astro.locals.t("menuButton.accessibleLabel")}</span>
+  {section && <span data-element="Section">{section}</span>}
   {section && <Icon name="right-caret" />}
-  <span class="td-menu-button__page">{route.entry.data.title}</span>
+  <span data-element="Page">{route.entry.data.title}</span>
 </MobileMenuToggleRoot>

package/dist/overrides/PageFrame.astro

@@ -10,14 +10,15 @@ const { hasSidebar } = Astro.locals.cookbookRoute;
   {
     hasSidebar && (
       <SidebarRoot
+        className="sidebar-pane"
         id="cookbook__sidebar"
-        className="sidebar-pane cookbook-print-hidden"
+        data-print-hidden=""
         popover="auto"
         aria-label={Astro.locals.t("sidebarNav.accessibleLabel")}
         tabIndex={-1}
       >
         <nav
-          class="sidebar-content"
+          data-element="Content"
           aria-label={Astro.locals.t("sidebarNav.accessibleLabel")}
         >
           <slot name="sidebar" />
@@ -25,7 +26,7 @@ const { hasSidebar } = Astro.locals.cookbookRoute;
       </SidebarRoot>
     )
   }
-  <div class="main-frame"><slot /></div>
+  <div data-element="MainFrame"><slot /></div>
 </PageFrameRoot>
 
 <script>

package/dist/overrides/Search.astro

@@ -18,6 +18,8 @@ const translations = {
 
 <SearchRoot
   className={Astro.props.class}
+  data-search-key={`cookbook-search:${import.meta.env.BASE_URL}:${Astro.locals.cookbookRoute.lang}`}
+  data-search-base={import.meta.env.BASE_URL}
   data-translations={JSON.stringify(translations)}
   data-strip-trailing-slash={import.meta.env.TRAILING_SLASH === "never" ||
     undefined}
@@ -35,7 +37,7 @@ const translations = {
     >
   </SearchButtonRoot>
   <dialog aria-label={label}>
-    <div class="dialog-frame">
+    <div data-element="Frame">
       <button
         type="button"
         data-element="Close"
@@ -47,13 +49,13 @@ const translations = {
             {Astro.locals.t("search.devWarning")}
           </p>
         ) : (
-          <div class="search-container">
+          <div data-element="Container">
             <p data-element="Status" data-search-status role="status" hidden />
             <SearchResultsRoot id="cookbook__search">
-              <div class="pagefind-ui" role="search" aria-label={label}>
-                <div class="cookbook-search-field">
+              <div data-element="UI" role="search" aria-label={label}>
+                <div data-element="Field">
                   <input
-                    class="cookbook-search-input"
+                    data-element="Input"
                     data-search-input
                     type="text"
                     aria-label={label}
@@ -64,14 +66,14 @@ const translations = {
                     autofocus
                   />
                   <button
-                    class="cookbook-search-clear"
+                    data-element="Clear"
                     data-clear-search
                     type="button"
                     aria-label={Astro.locals.t("pagefind.clear_search")}
                     hidden
                   />
                 </div>
-                <div data-search-results />
+                <div data-element="EngineUI" data-search-results />
               </div>
             </SearchResultsRoot>
           </div>
@@ -82,12 +84,17 @@ const translations = {
 </SearchRoot>
 <script>
   import { initializeSearch } from "../client/search.js";
-  document.querySelectorAll<HTMLElement>("site-search").forEach((element) => {
-    initializeSearch(
-      element,
-      {},
-      import.meta.env.DEV,
-      import.meta.env.BASE_URL,
-    );
-  });
+  function initialize(): void {
+    document.querySelectorAll<HTMLElement>("site-search").forEach((element) => {
+      if (element.dataset.searchBase !== import.meta.env.BASE_URL) return;
+      initializeSearch(
+        element,
+        {},
+        import.meta.env.DEV,
+        import.meta.env.BASE_URL,
+      );
+    });
+  }
+  initialize();
+  document.addEventListener("astro:page-load", initialize);
 </script>

package/dist/overrides/Sidebar.astro

@@ -46,10 +46,9 @@ const sidebar =
 const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 ---
 
-<div class="td-sidebar-heading">
+<div data-element="MobileHeading">
   <a
     data-element="HomeLink"
-    class="td-sidebar-heading__home"
     href={localeHref(
       (content.logo && content.logo.href) || "/",
       currentPath,
@@ -83,7 +82,7 @@ const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
   <SidebarList entries={sidebar} />
 </cookbook-sidebar>
 
-<div class="md:cookbook-hidden">
+<div data-mobile="">
   <MobileMenuFooter />
 </div>
 

package/dist/overrides/ThemeSelect.astro

@@ -50,7 +50,7 @@ const contrasts = [
             />
             <Icon name={icon} />
             <span>{label}</span>
-            <Icon name="approve-check" class="checkmark" />
+            <Icon name="approve-check" data-element="Checkmark" />
           </label>
         ))
       }
@@ -73,7 +73,7 @@ const contrasts = [
               <ContrastIcon level={icon} />
             )}
             <span>{label}</span>
-            <Icon name="approve-check" class="checkmark" />
+            <Icon name="approve-check" data-element="Checkmark" />
           </label>
         ))
       }

package/dist/routes/Page.astro

@@ -21,6 +21,7 @@ import { MainContentRoot } from "../components/MainContent.styles.js";
 import { BannerRoot } from "../components/Banner.styles.js";
 import { TableOfContentsLayoutRoot } from "../components/TableOfContentsLayout.styles.js";
 import { TableOfContentsRoot } from "../components/TableOfContents.styles.js";
+import AppearanceInit from "../components/AppearanceInit.astro";
 
 interface Props {
   frontmatter: Record<string, any>;
@@ -43,7 +44,6 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
 <html
   lang={route.lang}
   dir={route.dir}
-  data-theme="dark"
   data-has-sidebar={route.hasSidebar ? "" : undefined}
   data-has-toc={route.toc ? "" : undefined}
   data-has-hero={data.hero ? "" : undefined}
@@ -51,6 +51,9 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <AppearanceInit />
+    <meta name="astro-view-transitions-enabled" content="true" />
+    <meta name="astro-view-transitions-fallback" content="swap" />
     <DocumentStyles />
     <Head />
   </head>
@@ -64,8 +67,11 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
       <div>
         {
           route.toc && (
-            <TableOfContentsLayoutRoot className="right-sidebar-container cookbook-print-hidden">
-              <div class="right-sidebar">
+            <TableOfContentsLayoutRoot
+              className="right-sidebar-container"
+              data-print-hidden=""
+            >
+              <div data-element="Content">
                 <MobileTableOfContents />
                 <TableOfContentsRoot className="right-sidebar-panel">
                   <h2>{Astro.locals.t("tableOfContents.onThisPage")}</h2>
@@ -82,6 +88,7 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
         <MainPaneRoot className="main-pane">
           <MainContentRoot
             id="main-content"
+            tabIndex={-1}
             data-pagefind-body={indexed ? "" : undefined}
             lang={route.entryMeta.lang}
             dir={route.entryMeta.dir}
@@ -96,8 +103,8 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
             }
             {
               data.hero ? (
-                <div class="content-panel">
-                  <div class="cookbook-container">
+                <div data-element="Panel">
+                  <div data-element="Container">
                     <Hero />
                     <MarkdownContent>
                       <slot />
@@ -107,14 +114,14 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
                 </div>
               ) : (
                 <>
-                  <div class="content-panel">
-                    <div class="cookbook-container">
+                  <div data-element="Panel">
+                    <div data-element="Container">
                       <h1 id="_top" data-page-title set:html={data.title} />
                       {data.draft && <DraftContentNotice />}
                     </div>
                   </div>
-                  <div class="content-panel">
-                    <div class="cookbook-container">
+                  <div data-element="Panel">
+                    <div data-element="Container">
                       <MarkdownContent>
                         <slot />
                       </MarkdownContent>
@@ -129,6 +136,7 @@ const indexed = route.id !== "/404" && data.pagefind !== false && !data.draft;
       </div>
     </PageFrame>
     <script>
+      import "../client/client-navigation.js";
       import "../client/table-of-contents.js";
     </script>
   </body>

package/dist/styling.js

@@ -1,5 +1,5 @@
 import { n as resolveComponentStyles } from "./component-styles-DstqPFf3.js";
-import { t as configureCookbookStates } from "./tasty-states-_JhxFdK1.js";
+import { t as configureCookbookStates } from "./tasty-states-BIgiJQ3N.js";
 import { n as extendComponent, t as defineComponent } from "./define-component-BP4YwMak.js";
 import { mergeStyles, tasty, useGlobalStyles } from "@tenphi/tasty";
 //#region src/components/Button.styles.js

package/dist/{tasty-states-_JhxFdK1.js → tasty-states-BIgiJQ3N.js}

@@ -9,16 +9,13 @@ 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)"
+	"@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;
 let configuredRuntime;
@@ -44,4 +41,4 @@ function configureCookbookStates() {
 //#endregion
 export { cookbookStates as n, configureCookbookStates as t };
 
-//# sourceMappingURL=tasty-states-_JhxFdK1.js.map
+//# sourceMappingURL=tasty-states-BIgiJQ3N.js.map

package/dist/tasty-states-BIgiJQ3N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tasty-states-BIgiJQ3N.js","names":[],"sources":["../src/components/tasty-states.js"],"sourcesContent":["import { configure, getGlobalPredefinedStates } from \"@tenphi/tasty\";\nimport { resolveTypographyPresets } from \"../theme/defaults.js\";\nimport {\n  TASTY_UNITS,\n  TASTY_SPACING_PROPERTIES,\n} from \"../theme/tasty-config.js\";\n\nconst systemLight = \"@media(prefers-color-scheme: light)\";\nconst systemDark = \"@media(prefers-color-scheme: dark)\";\n\nexport const cookbookStates = {\n  \"@system-light\": systemLight,\n  \"@system-dark\": systemDark,\n  \"@light\": `@root(theme=light) | (!@root(theme) & ${systemLight})`,\n  \"@dark\": `@root(theme=dark) | (!@root(theme) & ${systemDark})`,\n  \"@sm\": \"@media(w > 40rem)\",\n  \"@md\": \"@media(w >= 50rem)\",\n  \"@lg\": \"@media(w >= 72rem)\",\n  \"@reduced-motion\": \"@media(prefers-reduced-motion: reduce)\",\n  // Check each selected element's ancestry so isolated sections do not affect\n  // surrounding prose in the same Markdown root.\n  \"@prose\": \"@own(!:is([data-not-content] *))\",\n  \"@prose-block\":\n    \"@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] + *)))\",\n  \"@prose-heading\":\n    \"@own(!:is([data-not-content] *)) & @own(!:is(h1 + *,h2 + *,h3 + *,h4 + *,h5 + *,h6 + *,[data-heading] + *))\",\n};\n\nlet configured = false;\nlet configuredRuntime;\n\n/** Configure aliases in the renderer's Tasty module before styles are parsed. */\nexport function configureCookbookStates() {\n  // Process-local server configuration shared across Astro/Vite module graphs.\n  // The integration prevents this module from entering browser bundles.\n  const runtime = globalThis.__tenphiCookbookTastyRuntime;\n  if (configured && configuredRuntime === runtime) return;\n  configure({\n    presets: resolveTypographyPresets(),\n    properties: TASTY_SPACING_PROPERTIES,\n    ...runtime,\n    units: { ...TASTY_UNITS, ...runtime?.units },\n  });\n  configuredRuntime = runtime;\n  // The integration may have configured this runtime already, including\n  // consumer overrides of built-in breakpoints. Only supply missing aliases.\n  const existingStates = getGlobalPredefinedStates();\n  const missingStates = Object.fromEntries(\n    Object.entries(cookbookStates).filter(\n      ([name]) => existingStates[name] === undefined,\n    ),\n  );\n  if (Object.keys(missingStates).length) configure({ states: missingStates });\n  configured = true;\n}\n"],"mappings":";;;;AAOA,MAAM,cAAc;AACpB,MAAM,aAAa;AAEnB,MAAa,iBAAiB;CAC5B,iBAAiB;CACjB,gBAAgB;CAChB,UAAU,yCAAyC,YAAY;CAC/D,SAAS,wCAAwC,WAAW;CAC5D,OAAO;CACP,OAAO;CACP,OAAO;CACP,mBAAmB;CAGnB,UAAU;CACV,gBACE;CACF,kBACE;AACJ;AAEA,IAAI,aAAa;AACjB,IAAI;;AAGJ,SAAgB,0BAA0B;CAGxC,MAAM,UAAU,WAAW;CAC3B,IAAI,cAAc,sBAAsB,SAAS;CACjD,UAAU;EACR,SAAS,yBAAyB;EAClC,YAAY;EACZ,GAAG;EACH,OAAO;GAAE,GAAG;GAAa,GAAG,SAAS;EAAM;CAC7C,CAAC;CACD,oBAAoB;CAGpB,MAAM,iBAAiB,0BAA0B;CACjD,MAAM,gBAAgB,OAAO,YAC3B,OAAO,QAAQ,cAAc,CAAC,CAAC,QAC5B,CAAC,UAAU,eAAe,UAAU,KAAA,CACvC,CACF;CACA,IAAI,OAAO,KAAK,aAAa,CAAC,CAAC,QAAQ,UAAU,EAAE,QAAQ,cAAc,CAAC;CAC1E,aAAa;AACf"}

package/dist/theme/shiki-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shiki-theme.d.ts","names":[],"sources":["../../src/theme/shiki-theme.ts"],"mappings":";;;;;;;iBA2KgB,oBACd,QAAQ,sCACP;iBAqNa,0BAA0B,QAAQ;iBAGlC,yBAAqB"}
+{"version":3,"file":"shiki-theme.d.ts","names":[],"sources":["../../src/theme/shiki-theme.ts"],"mappings":";;;;;;;iBAmOgB,oBACd,QAAQ,sCACP;iBAqNa,0BAA0B,QAAQ;iBAGlC,yBAAqB"}

package/dist/theme/shiki-theme.js

@@ -60,10 +60,10 @@ const syntaxColors = new Map([
 	background,
 	inserted,
 	deleted
-].map((color) => [color, `td-${color.slice(6, -7)}`]));
+].map((color) => [color, color.slice(6, -7)]));
 /** Keep grammar classification in Shiki and all presentation in Tasty. */
-const tastyClassesTransformer = {
-	name: "cookbook:tasty-classes",
+const tastyModifiersTransformer = {
+	name: "cookbook:tasty-modifiers",
 	enforce: "post",
 	root(root) {
 		const visit = (node) => {
@@ -74,41 +74,59 @@ const tastyClassesTransformer = {
 					const separator = declaration.indexOf(":");
 					const key = declaration.slice(0, separator).trim();
 					const value = declaration.slice(separator + 1).trim();
-					let className;
-					if (key === "color") className = syntaxColors.get(value);
-					else if (key === "background-color" && value === background) className = "td-syntax-bg";
-					else if (key === "font-style" && value === "italic") className = "td-syntax-italic";
-					else if (key === "font-weight" && value === "bold") className = "td-syntax-strong";
-					else if (key === "text-decoration" && value === "underline") className = "td-syntax-underline";
-					else if (key === "overflow-x" && value === "auto") className = "td-syntax-scroll";
-					else if (key === "white-space" && value === "pre-wrap" || key === "word-wrap" && value === "break-word") className = "td-syntax-wrap";
-					else if (key === "user-select" && value === "none") className = "td-syntax-marker";
-					if (!className) throw new Error(`Unsupported Shiki style ${JSON.stringify(declaration)}. Use semantic classes and theme.styles.SyntaxHighlight for custom transformers.`);
-					this.addClassToHast(node, className);
+					let modifier;
+					if (key === "color") modifier = syntaxColors.get(value);
+					else if (key === "background-color" && value === background) modifier = "syntax-bg";
+					else if (key === "font-style" && value === "italic") modifier = "syntax-italic";
+					else if (key === "font-weight" && value === "bold") modifier = "syntax-strong";
+					else if (key === "text-decoration" && value === "underline") modifier = "syntax-underline";
+					else if (key === "overflow-x" && value === "auto") modifier = "syntax-scroll";
+					else if (key === "white-space" && value === "pre-wrap" || key === "word-wrap" && value === "break-word") modifier = "syntax-wrap";
+					else if (key === "user-select" && value === "none") modifier = "syntax-marker";
+					if (!modifier) throw new Error(`Unsupported Shiki style ${JSON.stringify(declaration)}. Use semantic data modifiers and theme.styles.SyntaxHighlight for custom transformers.`);
+					node.properties[`data-${modifier}`] = "";
 				}
 				delete node.properties.style;
 			}
+			const classValues = [node.properties?.class, node.properties?.className];
+			const classes = classValues.flatMap((value) => typeof value === "string" ? value.split(/\s+/).filter(Boolean) : Array.isArray(value) ? value : []);
+			if (classValues.some((value) => typeof value === "string" || Array.isArray(value))) {
+				for (const name of classes) if (name === "astro-code" || name === "tasty-code" || name === "shiki") node.properties["data-syntax"] = "";
+				else if (name === "line") node.properties.dataElement = "Line";
+				else if (node.tagName !== "pre") throw new Error(`Unsupported Shiki class ${JSON.stringify(name)}. Use semantic data modifiers and theme.styles.SyntaxHighlight for custom transformers.`);
+				delete node.properties.className;
+				if (node.tagName === "pre") node.properties.class = ["tasty-code", ...classes.filter((name) => ![
+					"astro-code",
+					"tasty-code",
+					"shiki"
+				].includes(name))].join(" ");
+				else delete node.properties.class;
+			}
 			node.children?.forEach(visit);
+			if (node.properties?.dataElement === "Line" && node.children?.every(emptyToken)) node.children = [];
 		};
 		visit(root);
 	}
 };
+function emptyToken(node) {
+	return node.type === "text" ? node.value === "" : node.tagName === "span" && (node.children ?? []).every(emptyToken);
+}
 const diffLanguages = /* @__PURE__ */ new Set(["diff", "patch"]);
 /**
 * The diff grammar colors individual tokens, but it does not expose a stable
-* whole-line selector. Add semantic classes so insertions and deletions can
+* whole-line selector. Add semantic modifiers so insertions and deletions can
 * receive subtle, full-width surfaces without hiding their +/- markers.
 */
 const diffLineTransformer = {
 	name: "cookbook:diff-lines",
 	pre(element) {
-		if (this.options.lang && diffLanguages.has(this.options.lang)) this.addClassToHast(element, "td-diff");
+		if (this.options.lang && diffLanguages.has(this.options.lang)) element.properties["data-diff"] = "";
 	},
 	line(element, lineNumber) {
 		if (!this.options.lang || !diffLanguages.has(this.options.lang)) return;
 		const line = this.source.split(/\r?\n/)[lineNumber - 1] ?? "";
-		if (line.startsWith("+") && !line.startsWith("+++")) this.addClassToHast(element, "td-diff-line--inserted");
-		else if (line.startsWith("-") && !line.startsWith("---")) this.addClassToHast(element, "td-diff-line--deleted");
+		if (line.startsWith("+") && !line.startsWith("+++")) element.properties["data-inserted"] = "";
+		else if (line.startsWith("-") && !line.startsWith("---")) element.properties["data-deleted"] = "";
 	}
 };
 /**
@@ -123,7 +141,7 @@ function cookbookShikiConfig(config) {
 	const hasTsx = languages.some((language) => language === "tsx" || typeof language === "object" && language !== null && "name" in language && language.name === "tsx");
 	if (!transformers.includes(bashPlaceholderTransformer)) transformers.push(bashPlaceholderTransformer);
 	if (!transformers.includes(diffLineTransformer)) transformers.push(diffLineTransformer);
-	if (!transformers.includes(tastyClassesTransformer)) transformers.push(tastyClassesTransformer);
+	if (!transformers.includes(tastyModifiersTransformer)) transformers.push(tastyModifiersTransformer);
 	return {
 		...config,
 		langs: hasTsx ? languages : [...languages, "tsx"],