@tenphi/renderer 0.27.0 → 0.30.0

package/dist/components/Search.styles.js

@@ -20,7 +20,7 @@ export const SearchRoot = defineComponent("Search", {
     },
     Dialog: {
       $: "dialog",
-      radius: { "": "$card-radius", "!@md": "0" },
+      radius: { "": "1cr", "!@md": "0" },
       inlineSize: { "": "0 90% 40rem", "!@md": "100%" },
       blockSize: {
         "": "15rem max-content (100% - 8rem)",
@@ -54,7 +54,7 @@ export const SearchRoot = defineComponent("Search", {
       // eslint-disable-next-line tasty/no-runtime-styles-mutation
       mask: `url("${svgIconUrl(closeIcon)}") center / contain no-repeat`,
     },
-    OpenDialog: { $: "dialog", display: { "": "", "@own([open])": "flex" } },
+    OpenDialog: { $: "dialog", display: { "": null, "@own([open])": "flex" } },
     EnteredDialog: {
       $: "dialog",
       opacity: { "": null, "@own([open] & [data-open])": "1" },
@@ -72,8 +72,6 @@ export const SearchRoot = defineComponent("Search", {
       },
     },
     EnteredBackdrop: {
-      // 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", "!@md": "0" },
     },
@@ -83,8 +81,8 @@ export const SearchRoot = defineComponent("Search", {
       flow: "column",
       flexGrow: "1",
       blockSize: "min 0",
-      gap: "($gap * 2)",
-      padding: { "": "($gap * 3)", "!@md": "($gap * 2) ($gap * 2) 0" },
+      gap: "2x",
+      padding: { "": "3x", "!@md": "2x 2x 0" },
       overflow: "hidden",
     },
     Container: {
@@ -97,7 +95,8 @@ export const SearchRoot = defineComponent("Search", {
     },
     Close: {
       $: 'button[data-element="Close"]',
-      display: { "": "none", "!@md": "grid" },
+      display: "grid",
+      hide: { "": true, "!@md": false },
       placeItems: "center",
       alignSelf: "flex-end",
       flexShrink: "0",
@@ -110,7 +109,7 @@ export const SearchRoot = defineComponent("Search", {
       fill: "#clear",
       shadow: "none",
       cursor: "pointer",
-      transition: "color $transition, background-color $transition",
+      transition: "color, fill",
     },
     HoverClose: {
       $: 'button[data-element="Close"]',

package/dist/components/SearchButton.styles.js

@@ -17,13 +17,14 @@ export const SearchButtonRoot = extendComponent("SearchButton", Button, {
     },
     inlineMargin: {
       "": "0 start",
-      "@media(w >= 80rem)": "min(5rem, max(0px, calc(100% - 22rem))) start",
+      "@media(w >= 80rem)": "min(5rem, max(0px, (100% - 22rem))) start",
     },
     blockSize: {
       "": "0 $control-height initial",
       "!@md": "0 $docs-menu-button-size initial",
     },
-    padding: { "": "0 $gap 0 ($gap * 1.5)", "!@md": "0" },
+    blockPadding: "0",
+    inlinePadding: { "": "1.5x 1x", "!@md": "0" },
     border: { "": true, "!@md": "0" },
     radius: "$header-control-radius",
     fill: {
@@ -34,8 +35,15 @@ export const SearchButtonRoot = extendComponent("SearchButton", Button, {
     },
     preset: "small",
     shadow: "none",
-    transition: "color $transition, fill $transition",
-    Label: { $: "> span", hide: { "": false, "!@md": true } },
+    transition: "color, fill",
+    Label: {
+      $: "> span",
+      hide: { "": false, "!@md": true },
+      inlineSize: "min 0",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+    },
     PendingShortcut: {
       $: "> kbd",
       visibility: { "": null, "@own([data-pending])": "hidden" },
@@ -49,7 +57,7 @@ export const SearchButtonRoot = extendComponent("SearchButton", Button, {
       inlinePadding: "0.375rem",
       fill: "#surface-3",
       preset: "small",
-      radius: "($radius * 0.75)",
+      radius: "0.75r",
     },
     NativeIcon: { $: "> svg", hide: true },
     Icon: {

package/dist/components/SearchResults.styles.js

@@ -20,7 +20,7 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
     "$pagefind-ui-text": "#text-soft",
     "$pagefind-ui-background": "#surface",
     "$pagefind-ui-border": "#border",
-    "$pagefind-ui-border-width": "$border-width",
+    "$pagefind-ui-border-width": "1bw",
     "$pagefind-ui-tag": "#surface-3",
     preset: "body",
     UI: {
@@ -45,7 +45,7 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
     },
     EngineControls: {
       $: ".pagefind-ui__search-input, .pagefind-ui__search-clear",
-      display: "none",
+      hide: true,
     },
     Drawer: {
       $: ".pagefind-ui__drawer",
@@ -61,8 +61,8 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
       blockSize: "min 3rem",
       inlinePadding: "2.75rem",
       color: "#text",
-      border: "$border-width solid #border",
-      radius: "$radius",
+      border: true,
+      radius: "1r",
       fill: "#surface",
       shadow: "none",
     },
@@ -87,17 +87,17 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
       flexGrow: "1",
       blockSize: "min 0",
       overflowY: "auto",
-      blockMargin: { "": "($gap * 3) start", "!@md": "($gap * 2) start" },
-      blockBorder: "$border-width solid #border start",
-      inlineSize: { "!@md": "(100% + ($gap * 4))" },
-      inlineMargin: { "!@md": "(-1 * $gap * 2)" },
-      inlinePadding: { "!@md": "($gap * 2)" },
-      blockPadding: { "!@md": "($gap * 2) end" },
+      blockMargin: { "": "3x start", "!@md": "2x start" },
+      blockBorder: "1bw solid #border start",
+      inlineSize: { "": null, "!@md": "(100% + 4x)" },
+      inlineMargin: { "": null, "!@md": "-2x" },
+      inlinePadding: { "": null, "!@md": "2x" },
+      blockPadding: { "": null, "!@md": "2x end" },
     },
     Result: {
       $: ".pagefind-ui__result",
-      blockPadding: "($gap * 2)",
-      blockBorder: "$border-width solid #border start",
+      blockPadding: "2x",
+      blockBorder: "1bw solid #border start",
     },
     ResultLink: {
       $: ".pagefind-ui__result-link",
@@ -122,13 +122,13 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
     },
     Excerpt: {
       $: ".pagefind-ui__result-excerpt",
-      margin: "$gap 0 0",
+      margin: "1x top",
       color: "#text-soft",
       preset: "small",
     },
     NestedResult: {
       $: ".pagefind-ui__result-nested",
-      margin: "2x 0 0",
+      margin: "2x top",
       inlinePadding: "2x start",
       inlineBorder: "1bw solid #border start",
     },
@@ -141,12 +141,12 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
     },
     More: {
       $: ".pagefind-ui__button",
-      display: { "!@md": "block" },
-      inlineSize: { "!@md": "max-content" },
-      inlineMargin: { "!@md": "auto start" },
+      display: { "": null, "!@md": "block" },
+      inlineSize: { "": null, "!@md": "max-content" },
+      inlineMargin: { "": null, "!@md": "auto start" },
       padding: "1x 2x",
-      border: "$border-width solid #border",
-      radius: "$radius",
+      border: true,
+      radius: "1r",
       color: "#text",
       fill: "#surface-2",
       preset: "navigation",
@@ -184,7 +184,7 @@ export const SearchResultsRoot = defineComponent("SearchResults", {
     },
     SuppressedClear: {
       $: "[data-element=Clear]",
-      display: { "": "", "@own([hidden])": "none" },
+      hide: { "": null, "@own([hidden])": true },
     },
   },
 });

package/dist/components/Sidebar.styles.js

@@ -8,22 +8,22 @@ export const SidebarRoot = defineComponent("Sidebar", {
   "data-element": "Sidebar",
   styles: {
     "$sidebar-transition": "120ms",
-    display: { "@md": "block" },
+    display: { "": null, "@md": "block" },
     visibility: {
       "": "visible",
       "!@md": "hidden",
-      ":is(:popover-open) & !@md": "visible",
+      ":popover-open & !@md": "visible",
     },
     position: "fixed",
     zIndex: { "": "8", "!@md": "12" },
     blockInset: { "": "$docs-nav-height start, 0 end", "!@md": "0" },
     inlineInset: {
       "": "0 start, auto end",
-      "@md": "max(0px, calc((100% - $layout-width) / 2)) start, auto end",
+      "@md": "max(0px, ((100% - $layout-width) / 2)) start, auto end",
     },
     inlineSize: {
       "": "$sidebar-width",
-      "!@md": "min(22rem, calc(100% - 2rem))",
+      "!@md": "min(22rem, (100% - 2rem))",
     },
     blockSize: "auto",
     margin: "0",
@@ -38,7 +38,7 @@ export const SidebarRoot = defineComponent("Sidebar", {
     translate: {
       "": "0",
       "!@md": "-100% 0",
-      ":is(:popover-open) & [data-open] & !@md": "0",
+      ":popover-open & [data-open] & !@md": "0",
     },
     transition: {
       "": "none",
@@ -57,7 +57,7 @@ export const SidebarRoot = defineComponent("Sidebar", {
     },
     OpenBackdrop: {
       $: "&::backdrop",
-      opacity: { "": null, ":is(:popover-open) & [data-open]": "1" },
+      opacity: { "": null, ":popover-open & [data-open]": "1" },
     },
     MobileHeading: {
       $: "MobileHeading",
@@ -65,7 +65,7 @@ export const SidebarRoot = defineComponent("Sidebar", {
       hide: { "": true, "!@md": false },
       alignItems: "center",
       justifyContent: "space-between",
-      gap: "$gap",
+      gap: "1x",
     },
     HomeLink: {
       display: "flex",
@@ -73,7 +73,7 @@ export const SidebarRoot = defineComponent("Sidebar", {
       textDecoration: "none",
       inlineSize: "min 0",
       padding: "0",
-      gap: "$gap",
+      gap: "1x",
       color: "#text",
       preset: "h4",
     },
@@ -137,10 +137,10 @@ export const SidebarRoot = defineComponent("Sidebar", {
       flow: "column",
       blockSize: "min 100%",
       inlinePadding: "$docs-sidebar-pad-x",
-      gap: "($gap * 2)",
+      gap: "2x",
       blockPadding: {
-        "": "($gap * 3) start, ($gap * 6) end",
-        "!@md": "($gap * 2) start, ($gap * 6) end",
+        "": "3x start, 6x end",
+        "!@md": "2x start, 6x end",
       },
     },
     Tree: { $: "cookbook-sidebar", display: "block" },
@@ -167,27 +167,27 @@ export const SidebarRoot = defineComponent("Sidebar", {
       $: "ul > li + li",
       blockMargin: {
         "": null,
-        "@own(top-level & section)": "($gap * 2.5) start",
+        "@own(top-level & section)": "2.5x start",
       },
     },
     NestedItem: {
       $: "cookbook-sidebar details > ul > li",
-      inlineMargin: "($gap * 1.5) start",
+      inlineMargin: "1.5x start",
     },
     SectionHeading: {
       $: "SectionHeading",
-      margin: "0 0 1bw",
-      padding: "($gap * 0.75) ($gap * 1.25)",
+      margin: "1bw bottom",
+      padding: "0.75x 1.25x",
       color: "#text",
       preset: "small / strong",
     },
     Control: {
       $: "cookbook-sidebar summary, cookbook-sidebar a",
       blockSize: "min 2.25rem",
-      padding: "($gap * 0.75) ($gap * 1.25)",
+      padding: "0.75x 1.25x",
       color: "#sidebar-text",
       preset: "navigation",
-      radius: "$radius",
+      radius: "1r",
       textDecoration: "none",
     },
     Summary: {
@@ -267,8 +267,6 @@ export const SidebarRoot = defineComponent("Sidebar", {
       flexShrink: "0",
       inlineSize: "1rem",
       blockSize: "1rem",
-      // Tasty and browsers support :dir(); the lint rule's pseudo list omits it.
-      // eslint-disable-next-line tasty/valid-state-key
       transform: { "": "none", ":dir(rtl)": "rotate(180deg)" },
     },
     ExpandedCaret: {

package/dist/components/SkipLink.styles.js

@@ -11,14 +11,15 @@ export const SkipLinkRoot = defineComponent("SkipLink", {
     zIndex: { "": null, ":focus": "20" },
     color: { "": null, ":focus": "#accent-surface-text" },
     fill: { "": null, ":focus": "#accent-surface" },
-    radius: { "": null, ":focus": "$radius" },
+    radius: { "": null, ":focus": "1r" },
     shadow: { "": null, ":focus": "0 1rem 3rem #shadow" },
     textDecoration: { "": null, ":focus": "none" },
     position: "fixed",
-    inset: "($gap * 1.5) auto auto ($gap * 1.5)",
+    blockInset: "1.5x start",
+    inlineInset: "1.5x start",
     inlineSize: { "": "$visually-hidden-size", ":focus": "auto" },
     blockSize: { "": "$visually-hidden-size", ":focus": "auto" },
-    padding: { "": "0", ":focus": "$gap ($gap * 2)" },
+    padding: { "": "0", ":focus": "1x 2x" },
     overflow: { "": "hidden", ":focus": "visible" },
     clip: { "": "rect(0, 0, 0, 0)", ":focus": "auto" },
   },

package/dist/components/SocialIcons.styles.js

@@ -9,7 +9,7 @@ export const SocialIconsRoot = defineComponent("SocialIcons", {
   styles: {
     display: "flex",
     alignItems: "center",
-    gap: "($gap * 0.5)",
+    gap: "0.5x",
     Link: {
       $: "a",
       display: "grid",

package/dist/components/Steps.styles.js

@@ -9,12 +9,12 @@ export const StepsRoot = defineComponent("Steps", {
   styles: {
     display: "grid",
     gap: "2x",
-    padding: "4x left",
-    border: "1bw left #border",
+    inlinePadding: "4x start",
+    inlineBorder: "1bw solid #border start",
 
     Item: {
       $: "> li",
-      padding: "1x left",
+      inlinePadding: "1x start",
     },
     Marker: {
       $: "> li::marker",

package/dist/components/TableOfContents.styles.js

@@ -9,11 +9,11 @@ export const TableOfContentsRoot = defineComponent("TableOfContents", {
   styles: {
     display: "block",
     hide: { "": false, "!@lg": true },
-    blockPadding: "($gap * 4) start",
+    blockPadding: "4x start",
     inlinePadding: "$docs-sidebar-pad-x",
     Heading: {
       $: "h2",
-      margin: "0 0 $gap",
+      margin: "1x bottom",
       color: "#text",
       preset: "small / strong",
     },
@@ -39,7 +39,7 @@ export const TableOfContentsRoot = defineComponent("TableOfContents", {
       $: "a",
       display: "block",
       inlineSize: "0 auto 100%",
-      blockPadding: "($gap * 0.5)",
+      blockPadding: "0.5x",
       color: "#text-muted",
       preset: "small",
       textDecoration: "none",

package/dist/components/TableOfContentsLayout.styles.js

@@ -9,7 +9,7 @@ export const TableOfContentsLayoutRoot = defineComponent(
     as: "aside",
     "data-element": "TableOfContentsLayout",
     styles: {
-      display: { "": "", ":has(cookbook-mobile-toc)": "block" },
+      display: { "": null, ":has(cookbook-mobile-toc)": "block" },
       hide: {
         "": false,
         "!@lg": true,
@@ -18,7 +18,7 @@ export const TableOfContentsLayoutRoot = defineComponent(
       order: { "": "2", "!@lg": "0" },
       position: "relative",
       inlineSize: {
-        "": "max($sidebar-width, calc($sidebar-width + (100% - $content-width - $sidebar-width) / 2))",
+        "": "max($sidebar-width, ($sidebar-width + (100% - $content-width - $sidebar-width) / 2))",
         "!@lg": "100%",
       },
       Content: {

package/dist/components/ThemeSelect.styles.js

@@ -27,17 +27,17 @@ export const ThemeSelectRoot = defineComponent("ThemeSelect", {
       fill: "#clear",
       border: "0",
       radius: "$header-control-radius",
-      transition: "color $transition, fill $transition",
+      transition: "color, fill",
     },
     HoverTrigger: {
       $: "> button",
       color: {
         "": null,
-        "@own(:hover) | :has([popover]:is(:popover-open))": "#text",
+        "@own(:hover) | :has([popover]:popover-open)": "#text",
       },
       fill: {
         "": null,
-        "@own(:hover) | :has([popover]:is(:popover-open))": "#surface-2-hover",
+        "@own(:hover) | :has([popover]:popover-open)": "#surface-2-hover",
       },
     },
     ActiveTrigger: {
@@ -58,15 +58,15 @@ export const ThemeSelectRoot = defineComponent("ThemeSelect", {
       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))",
-      blockSize: "max (100dvh - $docs-nav-height - $gap)",
+      inlineSize: "min(15rem, (100vw - 2 * $docs-nav-pad-x))",
+      blockSize: "max (100dvh - $docs-nav-height - 1x)",
       overflowY: "auto",
       margin: "0",
-      padding: "$gap",
+      padding: "1x",
       color: "#text",
       fill: "#surface-2",
       border: true,
-      radius: "$card-radius",
+      radius: "1cr",
       shadow: "0 0.75rem 2rem #shadow",
       opacity: "0",
       scale: "1 0.96",
@@ -81,9 +81,9 @@ export const ThemeSelectRoot = defineComponent("ThemeSelect", {
       $: '[data-element="Panel"]',
       opacity: {
         "": null,
-        "@own(:is(:popover-open) & [data-open])": "1",
+        "@own(:popover-open & [data-open])": "1",
       },
-      scale: { "": null, "@own(:is(:popover-open) & [data-open])": "1" },
+      scale: { "": null, "@own(:popover-open & [data-open])": "1" },
     },
     Section: {
       $: "fieldset",
@@ -94,15 +94,15 @@ export const ThemeSelectRoot = defineComponent("ThemeSelect", {
     },
     SectionSpacing: {
       $: "fieldset + fieldset",
-      blockMargin: "$gap start",
-      blockPadding: "$gap start",
-      blockBorder: "$border-width solid #border start",
+      blockMargin: "1x start",
+      blockPadding: "1x start",
+      blockBorder: "1bw solid #border start",
     },
     SectionLabel: {
       $: "legend",
       float: "inline-start",
       inlineSize: "100%",
-      padding: "($gap * 0.75) $gap",
+      padding: "0.75x 1x",
       color: "#text-muted",
       preset: "small / strong",
     },
@@ -111,13 +111,13 @@ export const ThemeSelectRoot = defineComponent("ThemeSelect", {
       position: "relative",
       display: "flex",
       alignItems: "center",
-      gap: "$gap",
+      gap: "1x",
       inlineSize: "100%",
       blockSize: "min 2.25rem",
-      padding: "($gap * 0.75) $gap",
+      padding: "0.75x 1x",
       color: "#text-soft",
       preset: "small",
-      radius: "$radius",
+      radius: "1r",
       cursor: "pointer",
     },
     HoverOption: {

package/dist/components/TopNavigation.styles.js

@@ -26,7 +26,7 @@ export const TopNavigationRoot = defineComponent("TopNavigation", {
       flexGrow: "0",
       flexShrink: "0",
       flexBasis: "auto",
-      blockPadding: "($gap * 1.25) start, $gap end",
+      blockPadding: "1.25x start, 1x end",
       color: "#text-soft",
       preset: "navigation",
       textDecoration: "none",
@@ -38,8 +38,6 @@ export const TopNavigationRoot = defineComponent("TopNavigation", {
       color: { "": null, '@own([aria-current="page"])': "#accent-text" },
     },
     ActiveIndicator: {
-      // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
-      // eslint-disable-next-line tasty/no-state-in-selector
       $: 'a[aria-current="page"]::after',
       "$indicator-height": "2px",
       content: '""',

package/dist/components/VersionSwitcher.styles.js

@@ -24,7 +24,7 @@ export const VersionSwitcherRoot = defineComponent("VersionSwitcher", {
       // eslint-disable-next-line tasty/no-style-spread
       ...versionSelectStyles.Trigger,
       blockSize: "min $control-height",
-      inlinePadding: "$gap",
+      inlinePadding: "1x",
       fill: "#surface-2",
       border: true,
       preset: "small / strong",
@@ -35,10 +35,10 @@ export const VersionSwitcherRoot = defineComponent("VersionSwitcher", {
       // eslint-disable-next-line tasty/no-style-spread
       ...versionSelectStyles.Panel,
       positionAnchor: "--version-trigger",
-      blockInset: "(anchor(bottom) + $gap) start, auto end",
+      blockInset: "(anchor(bottom) + 1x) start, auto end",
       inlineInset: {
-        "": "anchor(left) start, auto end",
-        "!@md": "auto start, anchor(right) end",
+        "": "anchor(start) start, auto end",
+        "!@md": "auto start, anchor(end) end",
       },
     },
   },

package/dist/components/props.d.ts

@@ -17,6 +17,8 @@ interface PreviewProps {
   scripts?: string[];
   /** The frame's minimum height as a CSS length, such as `18rem`; defaults to `10rem`. */
   height?: string;
+  /** Room below the content of a preview that runs scripts, as a CSS length such as `12rem`, for overlays like a listbox; defaults to `0`. */
+  buffer?: string;
 }
 type StepsProps = Record<string, never>;
 interface TabsProps {

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

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

package/dist/components/props.ts

@@ -16,6 +16,8 @@ export interface PreviewProps {
   scripts?: string[];
   /** The frame's minimum height as a CSS length, such as `18rem`; defaults to `10rem`. */
   height?: string;
+  /** Room below the content of a preview that runs scripts, as a CSS length such as `12rem`, for overlays like a listbox; defaults to `0`. */
+  buffer?: string;
 }
 export type StepsProps = Record<string, never>;
 export interface TabsProps {

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

@@ -11,7 +11,7 @@ export function selectPopoverStyles({
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      gap: "($gap * 0.5)",
+      gap: "0.5x",
       color: "#text-soft",
       radius: "$header-control-radius",
       preset: "small",
@@ -21,11 +21,11 @@ export function selectPopoverStyles({
       $: "> button",
       color: {
         "": null,
-        "@own(:hover) | :has([popover]:is(:popover-open))": "#text",
+        "@own(:hover) | :has([popover]:popover-open)": "#text",
       },
       fill: {
         "": null,
-        "@own(:hover) | :has([popover]:is(:popover-open))": "#surface-2-hover",
+        "@own(:hover) | :has([popover]:popover-open)": "#surface-2-hover",
       },
     },
     TriggerLabel: {
@@ -44,15 +44,15 @@ export function selectPopoverStyles({
       $: '> [data-element="Panel"]',
       position: "fixed",
       inset: "auto",
-      inlineSize: "min(15rem, calc(100vw - 2 * $docs-nav-pad-x))",
-      blockSize: "max (100dvh - $docs-nav-height - $gap)",
+      inlineSize: "min(15rem, (100vw - 2 * $docs-nav-pad-x))",
+      blockSize: "max (100dvh - $docs-nav-height - 1x)",
       overflowY: "auto",
       margin: "0",
-      padding: "$gap",
+      padding: "1x",
       color: "#text",
       fill: "#surface-2",
       border: true,
-      radius: "$card-radius",
+      radius: "1cr",
       shadow: "0 0.75rem 2rem #shadow",
       opacity: "0",
       scale: "1 0.96",
@@ -67,28 +67,28 @@ export function selectPopoverStyles({
       $: '> [data-element="Panel"]',
       opacity: {
         "": null,
-        "@own(:is(:popover-open) & [data-open])": "1",
+        "@own(:popover-open & [data-open])": "1",
       },
-      scale: { "": null, "@own(:is(:popover-open) & [data-open])": "1" },
+      scale: { "": null, "@own(:popover-open & [data-open])": "1" },
     },
     PanelTitle: {
       $: "PanelTitle",
-      padding: "($gap * 0.75) $gap",
+      padding: "0.75x 1x",
       color: "#text-muted",
       preset: "small / strong",
     },
-    Options: { $: "nav", display: "grid", gap: "($gap * 0.25)" },
+    Options: { $: "nav", display: "grid", gap: "0.25x" },
     [option]: {
       $: "nav a",
       display: "flex",
       alignItems: "center",
-      gap: "$gap",
+      gap: "1x",
       blockSize: "min 2.25rem",
-      padding: "($gap * 0.75) $gap",
+      padding: "0.75x 1x",
       color: "#text-soft",
       preset: "small",
       textDecoration: "none",
-      radius: "$radius",
+      radius: "1r",
     },
     [hoverOption]: {
       $: "nav a",

package/dist/define-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"define-component.d.ts","names":[],"sources":["../src/define-component.ts"],"mappings":";;;KAwBK,eAAe,QAEhB,cAAc,KAAK,sBACf,aAAa,WAAW,QACtB,EAAE,cAAc,qBACd,+BAIP,EAAE;KAGF,cAAc,mBAAmB,8BACpC,4BACI,aACA;EAAqB,WAAW;IAC9B,kBAAkB,IAAI,oBACpB;KAKL,YAAY,UAAU,yBACxB,cAAc,IAAI,0BACjB,gBAAgB,gBAAgB,cAAc,EAAE,WAC9C,cACE,cAAc,EAAE,qBAAqB,wBACjC,sBAAsB,cAAc,EAAE;;iBAOlC,gBAAgB,UAAU,oBACxC,cACA,MAAM,GACN,SAAS,QAAQ,KAAK,eAAe;EACnC,SAAS;IAEV,cAAc,eAAe,MAAM,eAAe;;iBAcrC,gBACd,0BAA0B,oBAC1B,UAAU,YACV,UAAU,qBAAqB,uBAC/B,eAAe,qBACf,UAAU,kCACV,WAAW,oCAEX,cACA,SAAS,oBAAoB,GAAG,GAAG,GAAG,QAAQ,GAAG,MAChD,0BAA0B,QAAQ,GAAG,GAAG,GAAG,MAAM,YAAY"}
+{"version":3,"file":"define-component.d.ts","names":[],"sources":["../src/define-component.ts"],"mappings":";;;KAuBK,eAAe,QAEhB,cAAc,KAAK,sBACf,aAAa,WAAW,QACtB,EAAE,cAAc,qBACd,+BAIP,EAAE;KAGF,cAAc,mBAAmB,8BACpC,4BACI,aACA;EAAqB,WAAW;IAC9B,kBAAkB,IAAI,oBACpB;KAKL,YAAY,UAAU,yBACxB,cAAc,IAAI,0BACjB,gBAAgB,gBAAgB,cAAc,EAAE,WAC9C,cACE,cAAc,EAAE,qBAAqB,wBACjC,sBAAsB,cAAc,EAAE;;iBAOlC,gBAAgB,UAAU,oBACxC,cACA,MAAM,GACN,SAAS,QAAQ,KAAK,eAAe;EACnC,SAAS;IAEV,cAAc,eAAe,MAAM,eAAe;;iBAUrC,gBACd,0BAA0B,oBAC1B,UAAU,YACV,UAAU,qBAAqB,uBAC/B,eAAe,qBACf,UAAU,kCACV,WAAW,oCAEX,cACA,SAAS,oBAAoB,GAAG,GAAG,GAAG,QAAQ,GAAG,MAChD,0BAA0B,QAAQ,GAAG,GAAG,GAAG,MAAM,YAAY"}