@tenphi/renderer 0.21.1 → 0.21.2

package/dist/components/LayoutComponents.js

@@ -1,872 +0,0 @@
-import { tasty } from "@tenphi/tasty";
-import { customizeComponent } from "./customize-component.js";
-import { selectPopoverStyles } from "./select-popover-styles.js";
-import { configureCookbookStates } from "./tasty-states.js";
-
-configureCookbookStates();
-
-export const PageFrameRoot = customizeComponent(
-  "PageFrame",
-  tasty({
-    as: "div",
-    styles: {
-      display: "flex",
-      flow: "column",
-      blockSize: "min 100vh",
-      MainFrame: {
-        $: "> .main-frame",
-        inlineSize: { "": "0 100%", "@desktop": "min(100%, $layout-width)" },
-        inlineMargin: "auto",
-        blockPadding: "$docs-nav-height start",
-        inlinePadding: "0 start",
-      },
-      SidebarFrame: {
-        $: "&[data-has-sidebar] > .main-frame",
-        inlinePadding: { "": "$sidebar-width start", "@mobile": "0 start" },
-      },
-      Columns: {
-        $: "> .main-frame > div",
-        display: { "": "flex", "@narrow-layout": "block" },
-        inlineSize: "min 0",
-      },
-    },
-  }),
-);
-
-export const LogoRoot = customizeComponent(
-  "Logo",
-  tasty({
-    as: "span",
-    styles: {
-      display: "inline-grid",
-      flexGrow: "0",
-      flexShrink: "0",
-      flexBasis: "auto",
-      inlineSize: "4rem",
-      blockSize: "4rem",
-      color: "#logo-surface",
-      Svg: {
-        $: "> svg",
-        display: "block",
-        inlineSize: "100%",
-        blockSize: "100%",
-      },
-      Mark: {
-        $: "> svg > .td-logo__mark",
-        color: "#logo-mark",
-      },
-    },
-  }),
-);
-
-export const SiteLogoRoot = customizeComponent(
-  "SiteLogo",
-  tasty({
-    as: "span",
-    styles: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexShrink: 0,
-      inlineSize: { "": "auto max 12rem", "@mobile": "auto max 30vw" },
-      blockSize: { "": "2rem", "@mobile": "1.75rem" },
-      Image: {
-        $: "> img",
-        display: "block",
-        inlineSize: "auto max 100%",
-        blockSize: "100%",
-        objectFit: "contain",
-      },
-      Light: {
-        $: "> .td-site-logo__light",
-        hide: {
-          "": false,
-          "@parent(theme=dark)": true,
-          "!@parent(theme) & @media(prefers-color-scheme: dark)": true,
-        },
-      },
-      Dark: {
-        $: "> .td-site-logo__dark",
-        hide: {
-          "": true,
-          "@parent(theme=dark)": false,
-          "!@parent(theme) & @media(prefers-color-scheme: dark)": false,
-        },
-      },
-    },
-  }),
-);
-
-export const PackageVersionRoot = customizeComponent(
-  "PackageVersion",
-  tasty({
-    as: "span",
-    styles: {
-      display: "inline-flex",
-      hide: { "": false, "@compact": true },
-      alignItems: "center",
-      flexShrink: "0",
-      blockSize: "min 1.5rem",
-      inlinePadding: "($gap * 0.75)",
-      color: "#text-soft",
-      fill: "#surface-2",
-      border: true,
-      radius: "999px",
-      preset: "small",
-      whiteSpace: "nowrap",
-    },
-  }),
-);
-
-const versionSelectStyles = selectPopoverStyles({
-  option: "Link",
-  hoverOption: "HoverLink",
-  currentOption: "CurrentLink",
-});
-
-export const VersionSwitcherRoot = customizeComponent(
-  "VersionSwitcher",
-  tasty({
-    as: "div",
-    styles: {
-      ...versionSelectStyles,
-      display: "inline-flex",
-      flexShrink: "0",
-      Trigger: {
-        ...versionSelectStyles.Trigger,
-        blockSize: "min $control-height",
-        inlinePadding: "$gap",
-        fill: "#surface-2",
-        border: true,
-        preset: "small / strong",
-        anchorName: "--version-trigger",
-      },
-      Panel: {
-        ...versionSelectStyles.Panel,
-        positionAnchor: "--version-trigger",
-        blockInset: "(anchor(bottom) + $gap) start, auto end",
-        inlineInset: {
-          "": "anchor(left) start, auto end",
-          "@mobile": "auto start, anchor(right) end",
-        },
-      },
-    },
-  }),
-);
-
-export const TopNavigationRoot = customizeComponent(
-  "TopNavigation",
-  tasty({
-    as: "nav",
-    styles: {
-      display: "flex",
-      hide: { "": false, "@mobile": true },
-      alignItems: "stretch",
-      gap: "clamp(1.25rem, 2.5vw, 2.5rem)",
-      inlineSize: "100%",
-      blockSize: "min 2.75rem",
-      blockBorder: "1bw solid #border start",
-      overflowX: "auto",
-      scrollbar: "none",
-
-      Scrollbar: { $: "&::-webkit-scrollbar", hide: true },
-      Link: {
-        $: "a",
-        position: "relative",
-        display: "inline-flex",
-        alignItems: "center",
-        flexGrow: "0",
-        flexShrink: "0",
-        flexBasis: "auto",
-        blockPadding: "($gap * 1.25) start, $gap end",
-        color: "#text-soft",
-        preset: "navigation",
-        textDecoration: "none",
-        whiteSpace: "nowrap",
-      },
-      HoverLink: { $: "a:hover", color: "#text" },
-      CurrentLink: { $: 'a[aria-current="page"]', color: "#accent-text" },
-      ActiveIndicator: {
-        $: 'a[aria-current="page"]::after',
-        content: '""',
-        position: "absolute",
-        inset: "auto 0 0",
-        blockSize: "2px",
-        radius: "999px",
-        fill: "#accent-surface",
-      },
-    },
-  }),
-);
-
-export const HeaderRoot = customizeComponent(
-  "Header",
-  tasty({
-    as: "div",
-    styles: {
-      display: "flex",
-      flow: "column",
-      inlineSize: "0 100% ($layout-width - ($docs-sidebar-pad-x * 2))",
-      blockSize: "100%",
-      inlineMargin: "auto",
-
-      Primary: {
-        $: ".td-header__primary",
-        display: "flex",
-        alignItems: "center",
-        gap: { "": "clamp(0.5rem, 1.5vw, 1.5rem)", "@mobile": "0.5rem" },
-        blockSize: { "": "4.5rem", "@mobile": "3.5rem" },
-        flexShrink: "0",
-      },
-      TitleAndSearch: {
-        $: ".td-header__title, .td-header__search",
-        display: "flex",
-        alignItems: "center",
-        inlineSize: "min 0",
-      },
-      Title: {
-        $: ".td-header__title",
-        display: "flex",
-        flow: "row",
-        gap: "$gap",
-        overflow: "hidden",
-        flexShrink: "1",
-        inlineSize: "min 0",
-        inlineMargin: { "": "0 end", "@mobile": "auto end" },
-      },
-      LogoLink: {
-        $: ".td-header__logo-link",
-        display: "inline-grid",
-        flexShrink: "0",
-        placeItems: "center",
-        color: "#text",
-        textDecoration: "none",
-      },
-      Logo: {
-        $: '.td-header__logo[data-tasty-anatomy="Logo"]',
-        inlineSize: {
-          "": "2rem",
-          "@mobile": "1.75rem",
-        },
-        blockSize: {
-          "": "2rem",
-          "@mobile": "1.75rem",
-        },
-      },
-      SiteTitle: {
-        $: ".site-title",
-        inlineSize: "min 0",
-        overflow: "hidden",
-        color: "#text",
-        preset: { "": "h4", "@mobile": "h5" },
-        textDecoration: "none",
-        whiteSpace: "nowrap",
-        textOverflow: "ellipsis",
-      },
-      Search: {
-        $: ".td-header__search",
-        flexGrow: { "": "1", "@mobile": "0" },
-        flexShrink: { "": "1", "@mobile": "0" },
-        inlineSize: { "": "min 8rem", "@mobile": "$docs-menu-button-size" },
-        inlineMargin: { "": "auto", "@mobile": "0" },
-      },
-      SearchElement: {
-        $: ".td-header__search site-search",
-        inlineSize: "0 100% 28rem",
-        inlineMargin: "auto",
-      },
-      Tools: {
-        $: ".td-header__tools",
-        display: "flex",
-        hide: { "": false, "@mobile": true },
-        flow: "row",
-        alignItems: "center",
-        justifyContent: "flex-end",
-        gap: "($gap * 0.5)",
-      },
-      ToolItem: {
-        $: ".td-header__tools > *",
-        margin: "0",
-      },
-      Social: {
-        $: ".td-header__social",
-        display: "flex",
-        alignItems: "center",
-      },
-      MobileTheme: {
-        $: ".td-header__mobile-theme",
-        display: "grid",
-        hide: { "": true, "@mobile": false },
-        flexShrink: "0",
-        order: "1",
-        inlineSize: "$docs-menu-button-size",
-        blockSize: "$docs-menu-button-size",
-      },
-      MobileLanguage: {
-        $: ".td-header__mobile-language",
-        display: "grid",
-        hide: { "": true, "@mobile": false },
-        flexShrink: "0",
-        order: "1",
-        inlineSize: "$docs-menu-button-size",
-        blockSize: "$docs-menu-button-size",
-      },
-    },
-  }),
-);
-
-export const ThemeSelectRoot = customizeComponent(
-  "ThemeSelect",
-  tasty({
-    as: "cookbook-appearance-menu",
-    styles: {
-      display: "flex",
-      flexShrink: "0",
-      "$popover-transition": "120ms",
-      Trigger: {
-        $: "> button",
-        display: "grid",
-        placeItems: "center",
-        inlineSize: {
-          "": "$control-height",
-          "@mobile": "$docs-menu-button-size",
-        },
-        blockSize: {
-          "": "$control-height",
-          "@mobile": "$docs-menu-button-size",
-        },
-        padding: "0",
-        color: "#text-soft",
-        fill: "#clear",
-        border: "0",
-        radius: "$header-control-radius",
-        transition: "color $transition, fill $transition",
-      },
-      HoverTrigger: {
-        $: "> button:hover, &:has([popover]:popover-open) > button",
-        color: "#text",
-        fill: "#surface-2-hover",
-      },
-      ActiveTrigger: {
-        $: "> button:active",
-        color: "#text",
-        fill: "#surface-2-pressed",
-      },
-      Icon: {
-        $: "> button svg",
-        display: "block",
-        inlineSize: { "": "1.25rem", "@mobile": "1.125rem" },
-        blockSize: { "": "1.25rem", "@mobile": "1.125rem" },
-      },
-      Panel: {
-        $: "[popover]",
-        position: "fixed",
-        inset: "auto",
-        blockInset: { "": "4rem start", "@mobile": "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)",
-        overflowY: "auto",
-        margin: "0",
-        padding: "$gap",
-        color: "#text",
-        fill: "#surface-2",
-        border: true,
-        radius: "$card-radius",
-        shadow: "0 0.75rem 2rem #shadow",
-        opacity: "0",
-        scale: "1 0.96",
-        transformOrigin: "top",
-        transition: {
-          "": "none",
-          "!@reduced-motion":
-            "opacity $popover-transition ease-out, scale $popover-transition ease-out, display $popover-transition allow-discrete, overlay $popover-transition allow-discrete",
-        },
-      },
-      OpenPanel: {
-        $: "[popover]:popover-open[data-open]",
-        opacity: "1",
-        scale: "1",
-      },
-      Section: {
-        $: "fieldset",
-        inlineSize: "min 0",
-        margin: "0",
-        padding: "0",
-        border: "0",
-      },
-      SectionSpacing: {
-        $: "fieldset + fieldset",
-        blockMargin: "$gap start",
-        blockPadding: "$gap start",
-        blockBorder: "$border-width solid #border start",
-      },
-      SectionLabel: {
-        $: "legend",
-        float: "inline-start",
-        inlineSize: "100%",
-        padding: "($gap * 0.75) $gap",
-        color: "#text-muted",
-        preset: "small / strong",
-      },
-      Option: {
-        $: "label",
-        position: "relative",
-        display: "flex",
-        alignItems: "center",
-        gap: "$gap",
-        inlineSize: "100%",
-        blockSize: "min 2.25rem",
-        padding: "($gap * 0.75) $gap",
-        color: "#text-soft",
-        preset: "small",
-        radius: "$radius",
-        cursor: "pointer",
-      },
-      HoverOption: {
-        $: "label:hover",
-        color: "#text",
-        fill: "#surface-2-hover",
-      },
-      CheckedOption: {
-        $: "label:has(input:checked)",
-        color: "#accent-text",
-        fill: "#accent-surface-2-subtle",
-      },
-      FocusedOption: {
-        $: "label:has(input:focus-visible)",
-        outline: "$outline-width solid #focus / -2px",
-      },
-      Input: {
-        $: "input",
-        position: "absolute",
-        inlineSize: "1px",
-        blockSize: "0 1px",
-        padding: "0",
-        margin: "0",
-        overflow: "hidden",
-        clipPath: "inset(50%)",
-        whiteSpace: "nowrap",
-      },
-      OptionIcon: {
-        $: "label > svg",
-        display: "block",
-        flexShrink: "0",
-        inlineSize: "1rem",
-        blockSize: "1rem",
-      },
-      Checkmark: {
-        $: "label > svg:last-child",
-        inlineMargin: "auto start",
-        visibility: "hidden",
-      },
-      SelectedCheckmark: {
-        $: "label:has(input:checked) > svg:last-child",
-        visibility: "visible",
-      },
-    },
-  }),
-);
-
-export const SocialIconsRoot = customizeComponent(
-  "SocialIcons",
-  tasty({
-    as: "div",
-    styles: {
-      display: "flex",
-      alignItems: "center",
-      gap: "($gap * 0.5)",
-      Link: {
-        $: "a",
-        display: "grid",
-        placeItems: "center",
-        inlineSize: "$control-height",
-        blockSize: "$control-height",
-        color: "#text-soft",
-        fill: "#clear",
-        radius: "$header-control-radius",
-        textDecoration: "none",
-      },
-      HoverLink: {
-        $: "a:hover",
-        color: "#text",
-        fill: "#surface-2-hover",
-      },
-      Icon: {
-        $: "a > svg",
-        display: "block",
-        inlineSize: "1.25rem",
-        blockSize: "1.25rem",
-      },
-    },
-  }),
-);
-
-export const MobileNavigationTabsRoot = customizeComponent(
-  "MobileNavigationTabs",
-  tasty({
-    as: "nav",
-    styles: {
-      display: "grid",
-      hide: { "": false, "@desktop": true },
-      gap: "$gap",
-      blockMargin: "0",
-      Label: {
-        $: ".td-mobile-tabs__label",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-      },
-      Trigger: {
-        $: "summary",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: "$gap",
-        blockSize: "min 2.75rem",
-        padding: "$gap ($gap * 1.25)",
-        border: true,
-        radius: "$radius",
-        color: "#text-soft",
-        fill: "#surface",
-        preset: "navigation",
-        listStyle: "none",
-      },
-      Marker: {
-        $: "summary::marker, summary::-webkit-details-marker",
-        hide: true,
-      },
-      Caret: { $: "summary > svg", flexShrink: "0" },
-      ExpandedCaret: { $: "details[open] > summary > svg", rotate: "180deg" },
-      List: {
-        $: "ul",
-        display: "grid",
-        gap: "1bw",
-        padding: "$gap",
-        blockMargin: "$gap start",
-        margin: "$gap 0 0",
-        listStyle: "none",
-        border: true,
-        radius: "$radius",
-        fill: "#surface",
-      },
-      Item: { $: "li", margin: "0" },
-      Link: {
-        $: "a",
-        display: "flex",
-        alignItems: "center",
-        blockSize: "min 2.25rem",
-        padding: "($gap * 0.75) ($gap * 1.25)",
-        color: "#text-soft",
-        preset: "navigation",
-        textDecoration: "none",
-        radius: "$radius",
-      },
-      HoverLink: {
-        $: "a:hover",
-        color: "#text",
-        fill: "#surface-2-hover",
-      },
-      CurrentLink: {
-        $: 'a[aria-current="page"]',
-        color: "#accent-text",
-        fill: "#accent-surface-subtle",
-      },
-    },
-  }),
-);
-
-export const MobileMenuFooterRoot = customizeComponent(
-  "MobileMenuFooter",
-  tasty({
-    as: "div",
-    styles: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      flow: "row wrap",
-      gap: "($gap * 2)",
-      blockPadding: "$gap",
-      blockBorder: "$border-width solid #border start",
-      Social: {
-        $: ".td-mobile-preferences__social",
-        display: "flex",
-        hide: { "": false, ":empty": true },
-        alignItems: "center",
-        gap: "($gap * 2)",
-        inlineMargin: "auto end",
-        blockPadding: "($gap * 2)",
-      },
-    },
-  }),
-);
-
-export const FooterRoot = customizeComponent(
-  "Footer",
-  tasty({
-    as: "footer",
-    styles: {
-      display: "flex",
-      flow: "column",
-      gap: "($gap * 3)",
-      Meta: {
-        $: ".td-footer__meta",
-        display: "flex",
-        flow: "row wrap",
-        justifyContent: "space-between",
-        gap: "($gap * 1.5) ($gap * 6)",
-        blockMargin: "($gap * 6) start",
-        color: "#text-muted",
-        preset: "small",
-      },
-      LoneMetaItem: {
-        $: ".td-footer__meta > :only-child",
-        inlineMargin: "auto start",
-      },
-      MetaLink: {
-        $: ".td-footer__meta a",
-        display: "flex",
-        alignItems: "center",
-        gap: "$gap",
-        color: "#text-muted",
-        textDecoration: "none",
-      },
-      HoverMetaLink: {
-        $: ".td-footer__meta a:hover",
-        color: "#text",
-      },
-      Credit: {
-        $: ".td-footer__credit",
-        margin: "($gap * 3) auto",
-        color: "#text",
-        preset: "small",
-        textAlign: "center",
-      },
-      CreditLink: {
-        $: ".td-footer__credit a",
-        color: "#accent-text",
-        preset: "small / strong",
-        textDecoration: "none",
-      },
-      HoverCreditLink: {
-        $: ".td-footer__credit a:hover",
-        color: "#text",
-      },
-    },
-  }),
-);
-
-export const HeaderLinksRoot = customizeComponent(
-  "HeaderLinks",
-  tasty({
-    as: "cookbook-header-links",
-    styles: {
-      display: "flex",
-      flexShrink: "0",
-      order: { "": "0", "@mobile": "2" },
-      "$popover-transition": "120ms",
-      Desktop: {
-        $: ".td-header-links__desktop",
-        display: "flex",
-        hide: { "": false, "@mobile": true },
-        alignItems: "center",
-        gap: "($gap * 0.5)",
-      },
-      Link: {
-        $: "a",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        blockSize: "min $control-height",
-        padding: "$gap ($gap * 1.25)",
-        radius: "$radius",
-        color: "#text-soft",
-        fill: "#clear",
-        preset: "small / strong",
-        textDecoration: "none",
-        whiteSpace: "nowrap",
-      },
-      DesktopLink: {
-        $: ".td-header-links__desktop a",
-        radius: "$header-control-radius",
-        inlinePadding: "($gap * 2)",
-      },
-      HoverLink: { $: "a:hover", color: "#text", fill: "#surface-2-hover" },
-      PrimaryLink: {
-        $: 'a[data-variant="primary"]',
-        color: "#accent-surface-text",
-        fill: "#accent-surface",
-      },
-      HoverPrimaryLink: {
-        $: 'a[data-variant="primary"]:hover',
-        filter: "brightness(1.1)",
-      },
-      Trigger: {
-        $: ".td-header-links__trigger",
-        display: "grid",
-        hide: { "": true, "@mobile": false },
-        placeItems: "center",
-        inlineSize: "$docs-menu-button-size",
-        blockSize: "$docs-menu-button-size",
-        padding: "0",
-        border: "0",
-        radius: "$header-control-radius",
-        color: "#text-soft",
-        fill: "#clear",
-      },
-      HoverTrigger: {
-        $: ".td-header-links__trigger:hover",
-        color: "#text",
-        fill: "#surface-2-hover",
-      },
-      Panel: {
-        $: ".td-header-links__panel",
-        position: "fixed",
-        inset: "0.5rem $docs-nav-pad-x auto auto",
-        inlineSize: "min(20rem, calc(100vw - 2 * $docs-nav-pad-x))",
-        blockSize: "max (100dvh - 1rem)",
-        overflowY: "auto",
-        margin: "0",
-        padding: "$gap",
-        color: "#text",
-        fill: "#surface",
-        border: true,
-        radius: "$card-radius",
-        shadow: "0 0.75rem 2rem #shadow",
-        opacity: "0",
-        scale: "1 0.96",
-        transformOrigin: "top",
-        transition: {
-          "": "none",
-          "!@reduced-motion":
-            "opacity $popover-transition ease-out, scale $popover-transition ease-out, display $popover-transition allow-discrete, overlay $popover-transition allow-discrete",
-        },
-      },
-      OpenPanel: {
-        $: ".td-header-links__panel:popover-open[data-open]",
-        opacity: "1",
-        scale: "1",
-      },
-      PanelNavigation: {
-        $: ".td-header-links__panel nav",
-        display: "grid",
-        gap: "1bw",
-      },
-      PanelLink: {
-        $: ".td-header-links__panel a",
-        justifyContent: "flex-start",
-        blockSize: "min $docs-menu-button-size",
-        inlinePadding: "($gap * 1.5)",
-        preset: "navigation",
-        textAlign: "start",
-        whiteSpace: "normal",
-        overflowWrap: "anywhere",
-      },
-      FirstPanelLink: {
-        $: ".td-header-links__panel a:first-child",
-        inlinePadding:
-          "($gap * 1.5) start, ($docs-menu-button-size + $gap) end",
-      },
-      Close: {
-        $: ".td-header-links__close",
-        position: "absolute",
-        inset: "$gap $gap auto auto",
-        display: "grid",
-        placeItems: "center",
-        inlineSize: "$docs-menu-button-size",
-        blockSize: "$docs-menu-button-size",
-        padding: "0",
-        border: "0",
-        color: "#text-soft",
-        fill: "#clear",
-        radius: "$header-control-radius",
-      },
-      HoverClose: {
-        $: ".td-header-links__close:hover",
-        color: "#text",
-        fill: "#surface-2-hover",
-      },
-    },
-  }),
-);
-
-export const PageActionsRoot = customizeComponent(
-  "PageActions",
-  tasty({
-    as: "cookbook-page-actions",
-    styles: {
-      display: "flex",
-      flow: "row wrap",
-      alignItems: "center",
-      gap: "$gap",
-      preset: "small",
-      Control: {
-        $: "button, a",
-        display: "inline-flex",
-        alignItems: "center",
-        padding: "$gap ($gap * 1.5)",
-        border: true,
-        radius: "$radius",
-        color: "#text",
-        fill: "#surface",
-        preset: "small",
-        textDecoration: "none",
-        cursor: "pointer",
-      },
-      Hover: { $: "button:hover, a:hover", fill: "#surface-2" },
-      Focus: {
-        $: "button:focus-visible, a:focus-visible",
-        outline: "2px solid #focus / 2px",
-      },
-      Pending: { $: 'button[aria-disabled="true"]', cursor: "wait" },
-      Status: { $: "[role=status]", color: "#text-soft" },
-    },
-  }),
-);
-
-export const MobileTableOfContentsRoot = customizeComponent(
-  "MobileTableOfContents",
-  tasty({
-    as: "cookbook-mobile-toc",
-    styles: {
-      display: "block",
-      hide: { "": true, "@narrow-layout": false },
-      padding: "$gap $docs-sidebar-pad-x",
-      blockBorder: "$border-width solid #border end",
-      fill: "#surface",
-      Summary: {
-        $: "summary",
-        padding: "$gap",
-        color: "#text",
-        preset: "small / strong",
-        cursor: "pointer",
-        radius: "$radius",
-      },
-      List: {
-        $: "ul",
-        listStyle: "none",
-        padding: "0",
-        margin: "0",
-        display: "grid",
-        gap: "2px",
-      },
-      NestedList: { $: "ul ul", inlinePadding: "($gap * 2) start" },
-      Item: { $: "li", listStyle: "none", margin: "0", padding: "0" },
-      Link: {
-        $: "a",
-        display: "block",
-        padding: "$gap",
-        color: "#text-soft",
-        preset: "small",
-        radius: "$radius",
-        textDecoration: "none",
-      },
-      HoverLink: { $: "a:hover", fill: "#surface-2", color: "#text" },
-      Focus: {
-        $: "a:focus-visible, summary:focus-visible",
-        outline: "2px solid #focus / 2px",
-      },
-    },
-  }),
-);