@tenphi/starlight 0.5.0 → 0.6.1

package/dist/components/LayoutComponents.js

@@ -0,0 +1,404 @@
+import { tasty } from "@tenphi/tasty";
+import { customizeComponent } from "./customize-component.js";
+import { configureCookbookStates } from "./tasty-states.js";
+
+configureCookbookStates();
+
+export const LogoRoot = customizeComponent(
+  "Logo",
+  { as: "span" },
+  tasty({
+    as: "span",
+    styles: {
+      display: "inline-grid",
+      flexGrow: "0",
+      flexShrink: "0",
+      flexBasis: "auto",
+      inlineSize: "4rem",
+      blockSize: "4rem",
+      color: "#accent-surface",
+      Svg: {
+        $: "> svg",
+        display: "block",
+        inlineSize: "100%",
+        blockSize: "100%",
+      },
+    },
+  }),
+);
+
+export const PackageVersionRoot = customizeComponent(
+  "PackageVersion",
+  { as: "span" },
+  tasty({
+    as: "span",
+    styles: {
+      display: "inline-flex",
+      alignItems: "center",
+      flexShrink: "0",
+      minBlockSize: "1.5rem",
+      paddingInlineStart: "($gap * 0.75)",
+      paddingInlineEnd: "($gap * 0.75)",
+      color: "#text-soft",
+      fill: "#surface-2",
+      border: true,
+      radius: "999px",
+      preset: "small",
+      whiteSpace: "nowrap",
+    },
+  }),
+);
+
+export const TopNavigationRoot = customizeComponent(
+  "TopNavigation",
+  { as: "nav" },
+  tasty({
+    as: "nav",
+    styles: {
+      display: "flex",
+      hide: { "": false, "@mobile": true },
+      alignItems: "stretch",
+      gap: "clamp(1.25rem, 2.5vw, 2.5rem)",
+      inlineSize: "100%",
+      minBlockSize: "2.5rem",
+      overflowX: "auto",
+      scrollbar: "none",
+
+      Scrollbar: { $: "&::-webkit-scrollbar", hide: true },
+      Link: {
+        $: "a",
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        flexGrow: "0",
+        flexShrink: "0",
+        flexBasis: "auto",
+        paddingBlockStart: "($gap * 0.75)",
+        paddingBlockEnd: "$gap",
+        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 StarlightHeaderRoot = customizeComponent(
+  "StarlightHeader",
+  { as: "div" },
+  tasty({
+    as: "div",
+    styles: {
+      display: "flex",
+      flow: "column",
+      inlineSize: "100%",
+      maxInlineSize: "($layout-width - ($sl-sidebar-pad-x * 2))",
+      blockSize: "100%",
+      minInlineSize: "0",
+      marginInlineStart: "auto",
+      marginInlineEnd: "auto",
+
+      Primary: {
+        $: ".td-header__primary",
+        display: {
+          "": "grid",
+          "@mobile": "flex",
+        },
+        gridColumns:
+          "minmax(9rem, $sidebar-width) minmax(12rem, 28rem) minmax(5rem, 1fr)",
+        placeItems: "center stretch",
+        justifyContent: {
+          "": "normal",
+          "@mobile": "space-between",
+        },
+        flexGrow: "1",
+        flexShrink: "1",
+        flexBasis: "0%",
+        gap: {
+          "": "clamp(1rem, 2.5vw, 2.5rem)",
+          "@mobile": "$gap",
+        },
+        minBlockSize: "0",
+      },
+      TitleAndSearch: {
+        $: ".td-header__title, .td-header__search",
+        display: "flex",
+        alignItems: "center",
+        minInlineSize: "0",
+      },
+      Title: {
+        $: ".td-header__title",
+        display: "flex",
+        flow: "row",
+        gap: "$gap",
+        overflow: "hidden",
+        maxInlineSize: {
+          "": "none",
+          "@mobile": "(100% - (($sl-menu-button-size + $sl-nav-gap) * 3))",
+        },
+      },
+      SiteTitle: {
+        $: ".site-title",
+        color: "#text",
+        preset: { "": "h4 / strong", "@mobile": "h5 / strong" },
+      },
+      Search: {
+        $: ".td-header__search",
+        position: { "": "static", "@mobile": "fixed" },
+        zIndex: { "": "auto", "@mobile": "10" },
+        inset: {
+          "": "auto top",
+          "@mobile": "(($sl-nav-height - $sl-menu-button-size) / 2) top",
+        },
+        insetInlineEnd: {
+          "": "auto",
+          "@mobile":
+            "($sl-nav-pad-x + (($sl-menu-button-size + $sl-nav-gap) * 2))",
+        },
+        placeItems: { "": "normal", "@mobile": "center" },
+        inlineSize: { "": "auto", "@mobile": "$sl-menu-button-size" },
+        blockSize: { "": "auto", "@mobile": "$sl-menu-button-size" },
+        marginInlineStart: "0",
+      },
+      SearchElement: {
+        $: ".td-header__search site-search",
+        inlineSize: "100%",
+        blockSize: { "": "auto", "@mobile": "$sl-menu-button-size" },
+      },
+      Tools: {
+        $: ".td-header__tools",
+        display: "flex",
+        flow: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: "($gap * 1.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 },
+        position: { "": "static", "@mobile": "fixed" },
+        zIndex: { "": "auto", "@mobile": "10" },
+        inset: {
+          "": "auto top",
+          "@mobile": "(($sl-nav-height - $sl-menu-button-size) / 2) top",
+        },
+        insetInlineEnd: {
+          "": "auto",
+          "@mobile": "($sl-nav-pad-x + $sl-menu-button-size + $sl-nav-gap)",
+        },
+        placeItems: { "": "normal", "@mobile": "center" },
+        inlineSize: { "": "auto", "@mobile": "$sl-menu-button-size" },
+        blockSize: { "": "auto", "@mobile": "$sl-menu-button-size" },
+      },
+    },
+  }),
+);
+
+export const ThemeSelectRoot = customizeComponent(
+  "ThemeSelect",
+  { as: "starlight-theme-select" },
+  tasty({
+    as: "starlight-theme-select",
+    styles: {
+      display: "grid",
+      placeItems: "center",
+      margin: "0",
+      inlineSize: {
+        "": "$control-height",
+        "@mobile": "$sl-menu-button-size",
+      },
+      blockSize: {
+        "": "$control-height",
+        "@mobile": "$sl-menu-button-size",
+      },
+
+      Label: {
+        $: "label",
+        boxSizing: "border-box",
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        inlineSize: "100%",
+        blockSize: "100%",
+        padding: "0",
+        border: "0",
+        fill: "#clear",
+      },
+      Icon: {
+        $: ".label-icon",
+        position: "absolute",
+        zIndex: "1",
+        insetInlineStart: "50%",
+        inlineSize: "1rem",
+        blockSize: "1rem",
+        color: "#text-soft",
+        translate: "-50% 0",
+        pointerEvents: "none",
+      },
+      Select: {
+        $: "select",
+        appearance: "base-select",
+        position: "static",
+        inlineSize: "100%",
+        minInlineSize: "0",
+        blockSize: "100%",
+        minBlockSize: "0",
+        padding: "0",
+        margin: "0",
+        color: "#clear",
+        preset: "small / strong",
+        border: true,
+        radius: "$radius",
+        fill: {
+          "": "#surface-3",
+          ":hover": "#surface-3-hover",
+          ":active": "#surface-3-pressed",
+        },
+        shadow: "none",
+        cursor: "pointer",
+        transition: "color 120ms ease, fill 120ms ease",
+      },
+      PickerIcon: { $: "select::picker-icon", hide: true },
+      Picker: {
+        $: "select::picker(select)",
+        appearance: "base-select",
+        gap: "1px",
+        minInlineSize: "8rem",
+        marginBlockStart: "0.5rem",
+        padding: "4px",
+        color: "#text",
+        border: true,
+        radius: "$card-radius",
+        fill: "#surface-2",
+        shadow: "0 0.75rem 2rem #shadow",
+      },
+      OpenPicker: {
+        $: "select::picker(select):popover-open",
+        display: "grid",
+      },
+      Option: {
+        $: "option",
+        padding: "0.625rem 0.75rem",
+        color: "#text",
+        preset: "small",
+        radius: "$radius",
+        fill: "#surface-2",
+      },
+      HoverOption: {
+        $: "option:hover, option:focus",
+        fill: "#surface-2-hover",
+      },
+      CheckedOption: {
+        $: "option:checked",
+        color: "#accent-text",
+        fill: "color-mix(in oklab, #accent-surface 12%, #surface-2)",
+      },
+      Checkmark: {
+        $: "option::checkmark",
+        order: "1",
+        marginInlineStart: "auto",
+      },
+    },
+  }),
+);
+
+export const MobileNavigationTabsRoot = customizeComponent(
+  "MobileNavigationTabs",
+  { as: "nav" },
+  tasty({
+    as: "nav",
+    styles: {
+      display: "grid",
+      hide: { "": false, "@desktop": true },
+      gap: "$gap",
+      marginBlockEnd: "($gap * 2)",
+      paddingBlockEnd: "($gap * 2)",
+      borderBlockEnd: "$border-width solid #border",
+      Label: {
+        $: ".td-mobile-tabs__label",
+        paddingInline: "($gap * 1.25)",
+        color: "#text",
+        preset: "navigation",
+      },
+      List: {
+        $: "ul",
+        display: "grid",
+        gridColumns: "repeat(2, minmax(0, 1fr))",
+        gap: "$gap",
+        padding: "0",
+        margin: "0",
+        listStyle: "none",
+      },
+      Item: { $: "li", margin: "0" },
+      Link: {
+        $: "a",
+        display: "flex",
+        alignItems: "center",
+        minBlockSize: "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: "color-mix(in oklab, #accent-surface 12%, #surface)",
+      },
+    },
+  }),
+);
+
+export const MobileMenuFooterRoot = customizeComponent(
+  "MobileMenuFooter",
+  { as: "div" },
+  tasty({
+    as: "div",
+    styles: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flow: "row wrap",
+      gap: "($gap * 2)",
+      paddingBlock: "$gap",
+      borderBlockStart: "$border-width solid #border",
+      Social: {
+        $: ".td-mobile-preferences__social",
+        display: "flex",
+        hide: { "": false, ":empty": true },
+        alignItems: "center",
+        gap: "($gap * 2)",
+        marginInlineEnd: "auto",
+        paddingBlock: "($gap * 2)",
+      },
+    },
+  }),
+);

package/dist/components/Logo.astro

@@ -0,0 +1,39 @@
+---
+import { LogoRoot } from "./LayoutComponents.js";
+
+interface Props {
+  label?: string;
+  decorative?: boolean;
+  class?: string;
+}
+
+const {
+  label = "Cookbook",
+  decorative = false,
+  class: className,
+} = Astro.props;
+---
+
+<LogoRoot
+  className={className}
+  aria-hidden={decorative ? "true" : undefined}
+  data-tasty-anatomy="Logo"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 64 64"
+    role={decorative ? undefined : "img"}
+    aria-label={decorative ? undefined : label}
+    focusable="false"
+  >
+    <rect width="64" height="64" rx="14" fill="currentColor"></rect>
+    <path
+      fill="#fff"
+      d="M14.8 16c6.7.2 12.3 2 16.7 5.4v28.4c-4.4-3.1-10-4.7-16.6-4.9a3 3 0 0 1-2.9-3V19a3 3 0 0 1 2.8-3Z"
+    ></path>
+    <path
+      fill="#fff"
+      d="M49.2 16c-6.7.2-12.3 2-16.7 5.4v28.4c4.4-3.1 10-4.7 16.6-4.9a3 3 0 0 0 2.9-3V19a3 3 0 0 0-2.8-3Z"
+    ></path>
+  </svg>
+</LogoRoot>

package/dist/components/MobileNavigationTabs.astro

@@ -1,6 +1,7 @@
 ---
 import { layout } from "virtual:cookbook/layout";
 import { activeNavigationTab, navigationPath } from "../navigation.js";
+import { MobileNavigationTabsRoot } from "./LayoutComponents.js";
 
 interface Props {
   base?: string;
@@ -21,7 +22,11 @@ function tabHref(link: string): string {
 
 {
   layout.tabs.length > 0 && (
-    <nav class="td-mobile-tabs print:hidden" aria-label="Sections">
+    <MobileNavigationTabsRoot
+      className="td-mobile-tabs print:hidden"
+      aria-label="Sections"
+      data-tasty-anatomy="MobileNavigationTabs"
+    >
       <span class="td-mobile-tabs__label">Sections</span>
       <ul>
         {layout.tabs.map((tab, index) => (
@@ -35,6 +40,6 @@ function tabHref(link: string): string {
           </li>
         ))}
       </ul>
-    </nav>
+    </MobileNavigationTabsRoot>
   )
 }

package/dist/components/PackageVersion.astro

@@ -0,0 +1,22 @@
+---
+import { PackageVersionRoot } from "./LayoutComponents.js";
+
+interface Props {
+  version?: string;
+}
+
+const version = Astro.props.version?.trim();
+const label = version?.startsWith("v") ? version : version ? `v${version}` : "";
+---
+
+{
+  label && (
+    <PackageVersionRoot
+      className="td-package-version"
+      aria-label={`Version ${version}`}
+      data-tasty-anatomy="PackageVersion"
+    >
+      {label}
+    </PackageVersionRoot>
+  )
+}

package/dist/components/Preview.astro

@@ -1,4 +1,6 @@
 ---
+import { PreviewRoot } from "./TastyComponents.js";
+
 interface Props {
   title: string;
   html?: string;
@@ -10,22 +12,31 @@ const { title, html = "", css = "", javascript } = Astro.props;
 const source = `<!doctype html><meta charset="utf-8"><style>${css}</style>${html}${javascript ? `<script>${javascript}<\/script>` : ""}`;
 ---
 
-<figure class="td-preview" aria-label={title} data-tasty-anatomy="Preview">
-  <figcaption><strong>{title}</strong></figcaption>
+<PreviewRoot
+  className="td-preview"
+  aria-label={title}
+  data-tasty-anatomy="Preview"
+>
+  <PreviewRoot.Caption><strong>{title}</strong></PreviewRoot.Caption>
   {
     javascript ? (
-      <iframe title={title} sandbox="allow-scripts" srcdoc={source} />
+      <PreviewRoot.Frame
+        className="td-preview__frame"
+        title={title}
+        sandbox="allow-scripts"
+        srcDoc={source}
+      />
     ) : (
-      <div class="td-preview__stage">
+      <PreviewRoot.Stage className="td-preview__stage">
         <template
           shadowrootmode="open"
           set:html={`<style>${css}</style>${html}`}
         />
-      </div>
+      </PreviewRoot.Stage>
     )
   }
-  <details class="td-preview__code">
-    <summary>View source</summary>
-    <pre><code>{source}</code></pre>
-  </details>
-</figure>
+  <PreviewRoot.Code className="td-preview__code">
+    <PreviewRoot.Summary>View source</PreviewRoot.Summary>
+    <PreviewRoot.Pre><code>{source}</code></PreviewRoot.Pre>
+  </PreviewRoot.Code>
+</PreviewRoot>

package/dist/components/Steps.astro

@@ -1 +1,5 @@
-<ol class="td-steps" data-tasty-anatomy="Steps"><slot /></ol>
+---
+import { StepsRoot } from "./TastyComponents.js";
+---
+
+<StepsRoot className="td-steps" data-tasty-anatomy="Steps"><slot /></StepsRoot>

package/dist/components/Tabs.astro

@@ -1,10 +1,17 @@
 ---
+import { TabsRoot } from "./TastyComponents.js";
+
 interface Props {
   label?: string;
 }
 const { label = "Examples" } = Astro.props;
 ---
 
-<div class="td-tabs" role="group" aria-label={label} data-tasty-anatomy="Tabs">
+<TabsRoot
+  className="td-tabs"
+  role="group"
+  aria-label={label}
+  data-tasty-anatomy="Tabs"
+>
   <slot />
-</div>
+</TabsRoot>