@tenphi/renderer 0.22.1 → 0.24.0

package/dist/components/Preview.astro

@@ -13,17 +13,16 @@ const ui = messages(
 );
 ---
 
-<PreviewRoot className="td-preview not-content" aria-label={title}>
+<PreviewRoot className="td-preview" data-not-content="" aria-label={title}>
   <PreviewRoot.Caption><strong>{title}</strong></PreviewRoot.Caption>
-  <PreviewRoot.Stage className="td-preview__stage">
+  <PreviewRoot.Stage>
     <PreviewRoot.Frame
-      className="td-preview__frame"
       title={title}
       sandbox={javascript ? "allow-scripts" : ""}
       srcDoc={source}
     />
   </PreviewRoot.Stage>
-  <PreviewRoot.Code className="td-preview__code">
+  <PreviewRoot.Code>
     <PreviewRoot.Summary>{ui.viewSource}</PreviewRoot.Summary>
     <PreviewRoot.Pre><code>{source}</code></PreviewRoot.Pre>
   </PreviewRoot.Code>

package/dist/components/Preview.styles.js

@@ -56,14 +56,14 @@ export const PreviewRoot = defineComponent("Preview", {
       $: "> details > summary",
       fill: {
         "": null,
-        "@own(:is(details > summary:hover))": "#surface-2-hover",
+        "@own(:hover)": "#surface-2-hover",
       },
     },
     ActiveSummary: {
       $: "> details > summary",
       fill: {
         "": null,
-        "@own(:is(details > summary:active))": "#surface-2-pressed",
+        "@own(:active)": "#surface-2-pressed",
       },
     },
     Pre: {

package/dist/components/Search.styles.js

@@ -20,20 +20,20 @@ export const SearchRoot = defineComponent("Search", {
     },
     Dialog: {
       $: "dialog",
-      radius: { "": "$card-radius", "@mobile": "0" },
-      inlineSize: { "": "0 90% 40rem", "@mobile": "100%" },
+      radius: { "": "$card-radius", "!@md": "0" },
+      inlineSize: { "": "0 90% 40rem", "!@md": "100%" },
       blockSize: {
         "": "15rem max-content (100% - 8rem)",
-        "@mobile": "100% 100% 100%",
+        "!@md": "100% 100% 100%",
       },
-      margin: { "": "4rem auto auto", "@mobile": "0" },
+      margin: { "": "4rem auto auto", "!@md": "0" },
       padding: "0",
       color: "#text",
       border: true,
       fill: "#surface",
       shadow: "0 1rem 3rem #shadow",
       opacity: "0",
-      scale: { "": "0.98", "@mobile": "1" },
+      scale: { "": "0.98", "!@md": "1" },
       transition: {
         "": "none",
         "!@reduced-motion":
@@ -62,12 +62,12 @@ export const SearchRoot = defineComponent("Search", {
     },
     Backdrop: {
       $: "dialog::backdrop",
-      fill: { "": "#overlay", "@mobile": "#clear" },
-      backdropFilter: { "": "blur(0.25rem)", "@mobile": "none" },
+      fill: { "": "#overlay", "!@md": "#clear" },
+      backdropFilter: { "": "blur(0.25rem)", "!@md": "none" },
       opacity: "0",
       transition: {
         "": "none",
-        "!@reduced-motion & !@mobile":
+        "!@reduced-motion & @md":
           "opacity $dialog-transition ease-out, display $dialog-transition allow-discrete, overlay $dialog-transition allow-discrete",
       },
     },
@@ -75,20 +75,20 @@ export const SearchRoot = defineComponent("Search", {
       // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
       // eslint-disable-next-line tasty/no-state-in-selector
       $: "dialog[open][data-open]::backdrop",
-      opacity: { "": "1", "@mobile": "0" },
+      opacity: { "": "1", "!@md": "0" },
     },
     Frame: {
-      $: ".dialog-frame",
+      $: "Frame",
       display: "flex",
       flow: "column",
       flexGrow: "1",
       blockSize: "min 0",
       gap: "($gap * 2)",
-      padding: { "": "($gap * 3)", "@mobile": "($gap * 2) ($gap * 2) 0" },
+      padding: { "": "($gap * 3)", "!@md": "($gap * 2) ($gap * 2) 0" },
       overflow: "hidden",
     },
     Container: {
-      $: ".search-container",
+      $: "Container",
       display: "flex",
       flow: "column",
       flexGrow: "1",
@@ -97,7 +97,7 @@ export const SearchRoot = defineComponent("Search", {
     },
     Close: {
       $: 'button[data-element="Close"]',
-      display: { "": "none", "@mobile": "grid" },
+      display: { "": "none", "!@md": "grid" },
       placeItems: "center",
       alignSelf: "flex-end",
       flexShrink: "0",

package/dist/components/SearchButton.styles.js

@@ -10,10 +10,10 @@ export const SearchButtonRoot = extendComponent("SearchButton", Button, {
   "data-element": "SearchButton",
   styles: {
     color: { ":hover": "#text", ":active": "#text" },
-    justifyContent: { "": "flex-start", "@mobile": "center" },
+    justifyContent: { "": "flex-start", "!@md": "center" },
     inlineSize: {
       "": "initial 100% 22rem",
-      "@mobile": "initial $docs-menu-button-size 22rem",
+      "!@md": "initial $docs-menu-button-size 22rem",
     },
     inlineMargin: {
       "": "0 start",
@@ -21,21 +21,21 @@ export const SearchButtonRoot = extendComponent("SearchButton", Button, {
     },
     blockSize: {
       "": "0 $control-height initial",
-      "@mobile": "0 $docs-menu-button-size initial",
+      "!@md": "0 $docs-menu-button-size initial",
     },
-    padding: { "": "0 $gap 0 ($gap * 1.5)", "@mobile": "0" },
-    border: { "": true, "@mobile": "0" },
+    padding: { "": "0 $gap 0 ($gap * 1.5)", "!@md": "0" },
+    border: { "": true, "!@md": "0" },
     radius: "$header-control-radius",
     fill: {
       "": "#surface",
-      "@mobile": "#clear",
+      "!@md": "#clear",
       ":hover": "#surface-2-hover",
       ":active": "#surface-2-pressed",
     },
     preset: "small",
     shadow: "none",
     transition: "color $transition, fill $transition",
-    Label: { $: "> span", hide: { "": false, "@mobile": true } },
+    Label: { $: "> span", hide: { "": false, "!@md": true } },
     PendingShortcut: {
       $: "> kbd",
       visibility: { "": null, "@own([data-pending])": "hidden" },
@@ -43,7 +43,7 @@ export const SearchButtonRoot = extendComponent("SearchButton", Button, {
     Shortcut: {
       $: "> kbd",
       display: "flex",
-      hide: { "": false, "@narrow-layout": true },
+      hide: { "": false, "!@lg": true },
       gap: "0.25em",
       inlineMargin: "auto start",
       inlinePadding: "0.375rem",
@@ -57,8 +57,8 @@ export const SearchButtonRoot = extendComponent("SearchButton", Button, {
       content: '""',
       display: "block",
       flexShrink: "0",
-      inlineSize: { "": "1rem", "@mobile": "1.25rem" },
-      blockSize: { "": "1rem", "@mobile": "1.25rem" },
+      inlineSize: { "": "1rem", "!@md": "1.25rem" },
+      blockSize: { "": "1rem", "!@md": "1.25rem" },
       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

package/dist/components/SearchResults.styles.js

@@ -6,6 +6,8 @@ import { defineComponent } from "../define-component.js";
 
 configureCookbookStates();
 
+// Pagefind owns and updates result markup; its UI API exposes classes, not
+// configurable data-element identities. Keep class selectors only for that bridge.
 export const SearchResultsRoot = defineComponent("SearchResults", {
   as: "div",
   "data-element": "SearchResults",
@@ -22,23 +24,11 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
     "$pagefind-ui-tag": "#surface-3",
     preset: "body",
     UI: {
-      $: ".pagefind-ui, *",
-      display: {
-        "": "",
-        "@own(:is(.pagefind-ui)) | @own(:is([data-search-results]))": "flex",
-      },
-      flow: {
-        "": null,
-        "@own(:is(.pagefind-ui)) | @own(:is([data-search-results]))": "column",
-      },
-      flexGrow: {
-        "": null,
-        "@own(:is(.pagefind-ui)) | @own(:is([data-search-results]))": "1",
-      },
-      blockSize: {
-        "": null,
-        "@own(:is(.pagefind-ui)) | @own(:is([data-search-results]))": "min 0",
-      },
+      $: "UI, [data-element=EngineUI], .pagefind-ui",
+      display: "flex",
+      flow: "column",
+      flexGrow: "1",
+      blockSize: "min 0",
     },
     Form: {
       $: ".pagefind-ui__form",
@@ -49,7 +39,7 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
       blockSize: "min 0",
     },
     Field: {
-      $: ".cookbook-search-field",
+      $: "Field",
       position: "relative",
       flexShrink: "0",
     },
@@ -65,7 +55,7 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
       blockSize: "min 0",
     },
     Input: {
-      $: ".cookbook-search-input",
+      $: "Input",
       flexShrink: "0",
       inlineSize: "100%",
       blockSize: "min 3rem",
@@ -77,7 +67,7 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
       shadow: "none",
     },
     Clear: {
-      $: ".cookbook-search-clear",
+      $: "Clear",
       position: "absolute",
       blockInset: "0 start",
       inlineInset: "0 end",
@@ -97,12 +87,12 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
       flexGrow: "1",
       blockSize: "min 0",
       overflowY: "auto",
-      blockMargin: { "": "($gap * 3) start", "@mobile": "($gap * 2) start" },
+      blockMargin: { "": "($gap * 3) start", "!@md": "($gap * 2) start" },
       blockBorder: "$border-width solid #border start",
-      inlineSize: { "@mobile": "(100% + ($gap * 4))" },
-      inlineMargin: { "@mobile": "(-1 * $gap * 2)" },
-      inlinePadding: { "@mobile": "($gap * 2)" },
-      blockPadding: { "@mobile": "($gap * 2) end" },
+      inlineSize: { "!@md": "(100% + ($gap * 4))" },
+      inlineMargin: { "!@md": "(-1 * $gap * 2)" },
+      inlinePadding: { "!@md": "($gap * 2)" },
+      blockPadding: { "!@md": "($gap * 2) end" },
     },
     Result: {
       $: ".pagefind-ui__result",
@@ -151,9 +141,9 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
     },
     More: {
       $: ".pagefind-ui__button",
-      display: { "@mobile": "block" },
-      inlineSize: { "@mobile": "max-content" },
-      inlineMargin: { "@mobile": "auto start" },
+      display: { "!@md": "block" },
+      inlineSize: { "!@md": "max-content" },
+      inlineMargin: { "!@md": "auto start" },
       padding: "1x 2x",
       border: "$border-width solid #border",
       radius: "$radius",
@@ -166,7 +156,7 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
       fill: { "": null, "@own(:hover)": "#surface-2-hover" },
     },
     SearchIcon: {
-      $: ".cookbook-search-field::before",
+      $: "Field::before",
       content: '""',
       position: "absolute",
       zIndex: "1",
@@ -182,7 +172,7 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
       pointerEvents: "none",
     },
     ClearIcon: {
-      $: ".cookbook-search-clear::before",
+      $: "Clear::before",
       content: '""',
       display: "block",
       inlineSize: "1rem",
@@ -193,7 +183,7 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
       mask: `url("${svgIconUrl(closeIcon)}") center / 1rem no-repeat`,
     },
     SuppressedClear: {
-      $: ".cookbook-search-clear",
+      $: "[data-element=Clear]",
       display: { "": "", "@own([hidden])": "none" },
     },
   },

package/dist/components/SelectPopover.astro

@@ -27,9 +27,9 @@ const id = `select-${crypto.randomUUID()}`;
   aria-label={triggerLabel}
   title={title}
 >
-  {icon && <Icon name={icon} class="label-icon" />}
-  <span class="trigger-label">{selectedLabel}</span>
-  <Icon name="down-caret" class="caret" />
+  {icon && <Icon name={icon} data-element="LabelIcon" />}
+  <span data-element="TriggerLabel">{selectedLabel}</span>
+  <Icon name="down-caret" data-element="Caret" />
 </button>
 <div
   id={id}
@@ -39,7 +39,7 @@ const id = `select-${crypto.randomUUID()}`;
   aria-label={title}
   data-select-popover-panel
 >
-  <div class="panel-title">{title}</div>
+  <div data-element="PanelTitle">{title}</div>
   <nav aria-label={title}>
     {
       options.map((option) => (
@@ -48,8 +48,8 @@ const id = `select-${crypto.randomUUID()}`;
           aria-current={option.current ? "page" : undefined}
         >
           <span lang={option.lang}>{option.label}</span>
-          {option.hint && <span class="fallback-label">({option.hint})</span>}
-          <Icon name="approve-check" class="checkmark" />
+          {option.hint && <span data-element="Fallback">({option.hint})</span>}
+          <Icon name="approve-check" data-element="Checkmark" />
         </a>
       ))
     }
@@ -59,7 +59,16 @@ const id = `select-${crypto.randomUUID()}`;
 <script>
   import { initializePopoverMotion } from "../client/popover-motion.js";
 
-  document
-    .querySelectorAll<HTMLElement>("[data-select-popover-panel]")
-    .forEach((panel) => initializePopoverMotion(panel));
+  const initialized = new WeakSet<HTMLElement>();
+  function initialize(): void {
+    document
+      .querySelectorAll<HTMLElement>("[data-select-popover-panel]")
+      .forEach((panel) => {
+        if (initialized.has(panel)) return;
+        initialized.add(panel);
+        initializePopoverMotion(panel);
+      });
+  }
+  initialize();
+  document.addEventListener("astro:page-load", initialize);
 </script>

package/dist/components/Sidebar.styles.js

@@ -8,22 +8,22 @@ export const SidebarRoot = defineComponent("Sidebar", {
   "data-element": "Sidebar",
   styles: {
     "$sidebar-transition": "120ms",
-    display: { "@desktop": "block" },
+    display: { "@md": "block" },
     visibility: {
       "": "visible",
-      "@mobile": "hidden",
-      "@popover-open & @mobile": "visible",
+      "!@md": "hidden",
+      ":is(:popover-open) & !@md": "visible",
     },
     position: "fixed",
-    zIndex: { "": "8", "@mobile": "12" },
-    blockInset: { "": "$docs-nav-height start, 0 end", "@mobile": "0" },
+    zIndex: { "": "8", "!@md": "12" },
+    blockInset: { "": "$docs-nav-height start, 0 end", "!@md": "0" },
     inlineInset: {
       "": "0 start, auto end",
-      "@desktop": "max(0px, calc((100% - $layout-width) / 2)) start, auto end",
+      "@md": "max(0px, calc((100% - $layout-width) / 2)) start, auto end",
     },
     inlineSize: {
       "": "$sidebar-width",
-      "@mobile": "min(22rem, calc(100% - 2rem))",
+      "!@md": "min(22rem, calc(100% - 2rem))",
     },
     blockSize: "auto",
     margin: "0",
@@ -34,15 +34,15 @@ export const SidebarRoot = defineComponent("Sidebar", {
     scrollbar: "auto stable",
     fill: "#surface",
     overscrollBehavior: "contain",
-    shadow: { "": "none", "@mobile": "0.25rem 0 1rem #shadow" },
+    shadow: { "": "none", "!@md": "0.25rem 0 1rem #shadow" },
     translate: {
       "": "0",
-      "@mobile": "-100% 0",
-      "@popover-open & [data-open] & @mobile": "0",
+      "!@md": "-100% 0",
+      ":is(:popover-open) & [data-open] & !@md": "0",
     },
     transition: {
       "": "none",
-      "@mobile & !@reduced-motion":
+      "!@md & !@reduced-motion":
         "translate $sidebar-transition ease-out, visibility $sidebar-transition, display $sidebar-transition allow-discrete, overlay $sidebar-transition allow-discrete",
     },
     Backdrop: {
@@ -51,18 +51,18 @@ export const SidebarRoot = defineComponent("Sidebar", {
       opacity: "0",
       transition: {
         "": "none",
-        "@mobile & !@reduced-motion":
+        "!@md & !@reduced-motion":
           "opacity $sidebar-transition ease-out, display $sidebar-transition allow-discrete, overlay $sidebar-transition allow-discrete",
       },
     },
     OpenBackdrop: {
       $: "&::backdrop",
-      opacity: { "": null, "@popover-open & [data-open]": "1" },
+      opacity: { "": null, ":is(:popover-open) & [data-open]": "1" },
     },
     MobileHeading: {
-      $: ".td-sidebar-heading",
+      $: "MobileHeading",
       display: "flex",
-      hide: { "": true, "@mobile": false },
+      hide: { "": true, "!@md": false },
       alignItems: "center",
       justifyContent: "space-between",
       gap: "$gap",
@@ -88,7 +88,7 @@ export const SidebarRoot = defineComponent("Sidebar", {
       whiteSpace: "nowrap",
     },
     Close: {
-      $: ".td-sidebar-heading > button",
+      $: "MobileHeading > button",
       display: "grid",
       placeItems: "center",
       flexShrink: "0",
@@ -101,18 +101,18 @@ export const SidebarRoot = defineComponent("Sidebar", {
       radius: "$header-control-radius",
     },
     HoverClose: {
-      $: ".td-sidebar-heading > button",
+      $: "MobileHeading > button",
       color: {
         "": null,
-        "@own(:is(.td-sidebar-heading > button:hover))": "#text",
+        "@own(:hover)": "#text",
       },
       fill: {
         "": null,
-        "@own(:is(.td-sidebar-heading > button:hover))": "#surface-2-hover",
+        "@own(:hover)": "#surface-2-hover",
       },
     },
     CloseIcon: {
-      $: ".td-sidebar-heading > button > svg",
+      $: "MobileHeading > button > svg",
       inlineSize: "1.25rem",
       blockSize: "1.25rem",
     },
@@ -132,7 +132,7 @@ export const SidebarRoot = defineComponent("Sidebar", {
       },
     },
     Content: {
-      $: ".sidebar-content",
+      $: "Content",
       display: "flex",
       flow: "column",
       blockSize: "min 100%",
@@ -140,7 +140,7 @@ export const SidebarRoot = defineComponent("Sidebar", {
       gap: "($gap * 2)",
       blockPadding: {
         "": "($gap * 3) start, ($gap * 6) end",
-        "@mobile": "($gap * 2) start, ($gap * 6) end",
+        "!@md": "($gap * 2) start, ($gap * 6) end",
       },
     },
     Tree: { $: "cookbook-sidebar", display: "block" },
@@ -154,13 +154,18 @@ export const SidebarRoot = defineComponent("Sidebar", {
       listStyle: "none",
     },
     Item: { $: "cookbook-sidebar li", overflowWrap: "anywhere" },
-    TopLevelSpacing: { $: ".top-level > li + li", blockMargin: "0 start" },
+    TopLevelSpacing: {
+      $: "ul > li + li",
+      blockMargin: {
+        "": null,
+        "@own(top-level)": "0 start",
+      },
+    },
     GroupSpacing: {
-      $: ".top-level > li + li",
+      $: "ul > li + li",
       blockMargin: {
         "": null,
-        "@own(:is(.top-level > li + li:has(> .sidebar-section-label)))":
-          "($gap * 2.5) start",
+        "@own(top-level & section)": "($gap * 2.5) start",
       },
     },
     NestedItem: {
@@ -168,7 +173,7 @@ export const SidebarRoot = defineComponent("Sidebar", {
       inlineMargin: "($gap * 1.5) start",
     },
     SectionHeading: {
-      $: ".sidebar-section-label",
+      $: "SectionHeading",
       margin: "0 0 1bw",
       padding: "($gap * 0.75) ($gap * 1.25)",
       color: "#text",
@@ -194,7 +199,7 @@ export const SidebarRoot = defineComponent("Sidebar", {
       userSelect: "none",
     },
     GroupLabel: {
-      $: ".group-label",
+      $: "GroupLabel, [data-element=SectionHeading]",
       display: "flex",
       alignItems: "center",
       inlineSize: "min 0",
@@ -202,22 +207,22 @@ export const SidebarRoot = defineComponent("Sidebar", {
       gap: "0.25em",
     },
     GroupLabelText: {
-      $: ".group-label > span",
+      $: "GroupLabel > span, SectionHeading > span",
       inlineSize: {
         "": null,
-        "@own(:is(.group-label > span:first-child))": "min 0",
+        "@own(:first-child)": "min 0",
       },
       overflow: {
         "": null,
-        "@own(:is(.group-label > span:first-child))": "hidden",
+        "@own(:first-child)": "hidden",
       },
       textOverflow: {
         "": null,
-        "@own(:is(.group-label > span:first-child))": "ellipsis",
+        "@own(:first-child)": "ellipsis",
       },
       whiteSpace: {
         "": null,
-        "@own(:is(.group-label > span:first-child))": "nowrap",
+        "@own(:first-child)": "nowrap",
       },
     },
     Link: {
@@ -231,10 +236,10 @@ export const SidebarRoot = defineComponent("Sidebar", {
     },
     LinkLabel: {
       $: "a > span",
-      inlineSize: { "": null, "@own(:is(a > span:first-child))": "min 0" },
-      overflow: { "": null, "@own(:is(a > span:first-child))": "hidden" },
-      textOverflow: { "": null, "@own(:is(a > span:first-child))": "ellipsis" },
-      whiteSpace: { "": null, "@own(:is(a > span:first-child))": "nowrap" },
+      inlineSize: { "": null, "@own(:first-child)": "min 0" },
+      overflow: { "": null, "@own(:first-child)": "hidden" },
+      textOverflow: { "": null, "@own(:first-child)": "ellipsis" },
+      whiteSpace: { "": null, "@own(:first-child)": "nowrap" },
     },
     InteractiveControl: {
       $: "cookbook-sidebar a, cookbook-sidebar summary",
@@ -253,7 +258,7 @@ export const SidebarRoot = defineComponent("Sidebar", {
       hide: true,
     },
     Caret: {
-      $: ".sidebar-caret",
+      $: "Caret",
       flexShrink: "0",
       inlineSize: "1rem",
       blockSize: "1rem",
@@ -262,10 +267,10 @@ export const SidebarRoot = defineComponent("Sidebar", {
       transform: { "": "none", ":dir(rtl)": "rotate(180deg)" },
     },
     ExpandedCaret: {
-      $: "details > summary > .sidebar-caret, details > summary > a > .sidebar-caret",
+      $: "details > summary > [data-element=Caret], details > summary > a > [data-element=Caret]",
       transform: {
         "": null,
-        "@own(:is(details[open] > summary > .sidebar-caret)) | @own(:is(details[open] > summary > a > .sidebar-caret))":
+        "@own(:is(details[open] > summary > *, details[open] > summary > a > *))":
           "rotate(90deg)",
       },
     },
@@ -275,20 +280,18 @@ export const SidebarRoot = defineComponent("Sidebar", {
     },
     GroupLink: { $: "summary > a", justifyContent: "space-between" },
     LinkedSectionHeading: {
-      $: ".sidebar-section-label",
+      $: "[data-element=SectionHeading]",
       padding: { "": null, "@own(:has(> a))": "0" },
     },
     SectionLink: {
-      $: ".sidebar-section-label > a",
+      $: "SectionHeading > a",
       color: {
         "": null,
-        '@own(:is(.sidebar-section-label > a:not([aria-current="page"])))':
-          "#text",
+        '@own(![aria-current="page"])': "#text",
       },
       preset: {
         "": null,
-        '@own(:is(.sidebar-section-label > a:not([aria-current="page"])))':
-          "small / strong",
+        '@own(![aria-current="page"])': "small / strong",
       },
     },
     Badge: {
@@ -305,9 +308,15 @@ export const SidebarRoot = defineComponent("Sidebar", {
       whiteSpace: "nowrap",
     },
     TopLevelLink: {
-      $: "a.large",
-      color: { "": null, '@own(:not([aria-current="page"]))': "#sidebar-text" },
-      preset: { "": null, '@own(:not([aria-current="page"]))': "navigation" },
+      $: "a",
+      color: {
+        "": null,
+        '@own(top-level & ![aria-current="page"])': "#sidebar-text",
+      },
+      preset: {
+        "": null,
+        '@own(top-level & ![aria-current="page"])': "navigation",
+      },
     },
   },
 });