@stisocial/ui 0.1.0 → 0.2.0

package/dist/site/MegaMenu/MegaMenu.js

@@ -0,0 +1,170 @@
+"use client";
+import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
+import { ArrowRightIcon } from "../../icons/generated/ArrowRightIcon.js";
+import MegaMenu_module_default from "./MegaMenu.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Button, Link } from "react-aria-components";
+// src/site/MegaMenu/MegaMenu.tsx
+/**
+* Büyük açılır menü: APG "Disclosure Navigation Menu" kalıbı. Düğme paneli açar ve kapatır
+* (`aria-expanded`); panel bağlantı gruplarını, her bağlantının açıklamasıyla, ve isteğe bağlı bir
+* öne çıkan kartı gösterir. Panel en yakın konumlu atasına (SiteHeader'da üst bilgi) göre tam
+* genişlikte açılır. Escape kapatır ve odağı düğmeye verir; odak panelden çıkınca ya da dışarı
+* tıklanınca kapanır.
+*/
+function MegaMenu({ label, groups, featured, isOpen, defaultOpen = false, onOpenChange, openOnHover = true, inline = false, className, id }) {
+	const base = useId();
+	const panelId = `${base}-panel`;
+	const [internal, setInternal] = useState(defaultOpen);
+	const open = isOpen ?? internal;
+	const rootRef = useRef(null);
+	const buttonRef = useRef(null);
+	const timer = useRef(void 0);
+	/** Fare üzerine gelmeyle açıldı (basmayla sabitlenmedi): ayrılınca kapanır. */
+	const byHover = useRef(false);
+	const setOpen = (next) => {
+		if (!next) byHover.current = false;
+		if (isOpen === void 0) setInternal(next);
+		onOpenChange?.(next);
+	};
+	const setOpenRef = useRef(setOpen);
+	setOpenRef.current = setOpen;
+	useEffect(() => {
+		if (!open || inline) return;
+		const onDown = (event) => {
+			if (!rootRef.current?.contains(event.target)) setOpenRef.current(false);
+		};
+		document.addEventListener("pointerdown", onDown);
+		return () => document.removeEventListener("pointerdown", onDown);
+	}, [open, inline]);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const onKeyDown = (event) => {
+		if (event.key === "Escape" && open) {
+			event.stopPropagation();
+			setOpen(false);
+			buttonRef.current?.focus();
+		}
+	};
+	const onBlur = (event) => {
+		if (inline || !open) return;
+		const next = event.relatedTarget;
+		if (next && !event.currentTarget.contains(next)) setOpen(false);
+	};
+	const hover = (value) => (event) => {
+		if (!openOnHover || inline || event.pointerType !== "mouse") return;
+		clearTimeout(timer.current);
+		if (!value && !byHover.current) return;
+		timer.current = setTimeout(() => {
+			byHover.current = value;
+			setOpen(value);
+		}, value ? 80 : 160);
+	};
+	const press = () => {
+		clearTimeout(timer.current);
+		if (open && byHover.current) {
+			byHover.current = false;
+			return;
+		}
+		byHover.current = false;
+		setOpen(!open);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		ref: rootRef,
+		className: [MegaMenu_module_default.root, className].filter(Boolean).join(" "),
+		"data-open": open || void 0,
+		"data-inline": inline || void 0,
+		onKeyDown,
+		onBlur,
+		onPointerEnter: hover(true),
+		onPointerLeave: hover(false),
+		children: [/* @__PURE__ */ jsxs(Button, {
+			ref: buttonRef,
+			className: MegaMenu_module_default.trigger,
+			"aria-expanded": open,
+			"aria-controls": panelId,
+			onPress: press,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: MegaMenu_module_default.triggerLabel,
+				children: label
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+				className: MegaMenu_module_default.chevron,
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			id: panelId,
+			className: MegaMenu_module_default.panel,
+			hidden: !open,
+			"data-inline": inline || void 0,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: MegaMenu_module_default.inner,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: MegaMenu_module_default.groups,
+					children: groups.map((group, gi) => {
+						const titleId = `${base}-g${gi}`;
+						return /* @__PURE__ */ jsxs("div", {
+							className: MegaMenu_module_default.group,
+							children: [group.title ? /* @__PURE__ */ jsx("p", {
+								className: MegaMenu_module_default.groupTitle,
+								id: titleId,
+								children: group.title
+							}) : null, /* @__PURE__ */ jsx("ul", {
+								className: MegaMenu_module_default.list,
+								"aria-labelledby": group.title ? titleId : void 0,
+								children: group.items.map((item) => /* @__PURE__ */ jsx("li", {
+									className: MegaMenu_module_default.listItem,
+									children: /* @__PURE__ */ jsxs(Link, {
+										href: item.href,
+										className: MegaMenu_module_default.item,
+										"aria-current": item.isCurrent ? "page" : void 0,
+										onPress: () => inline && setOpen(false),
+										children: [item.icon ? /* @__PURE__ */ jsx("span", {
+											className: MegaMenu_module_default.itemIcon,
+											"aria-hidden": "true",
+											children: item.icon
+										}) : null, /* @__PURE__ */ jsxs("span", {
+											className: MegaMenu_module_default.itemText,
+											children: [/* @__PURE__ */ jsxs("span", {
+												className: MegaMenu_module_default.itemLabel,
+												children: [item.label, item.badge ? /* @__PURE__ */ jsx("span", {
+													className: MegaMenu_module_default.badge,
+													children: item.badge
+												}) : null]
+											}), item.description ? /* @__PURE__ */ jsx("span", {
+												className: MegaMenu_module_default.itemDescription,
+												children: item.description
+											}) : null]
+										})]
+									})
+								}, item.href))
+							})]
+						}, group.title ?? `g${gi}`);
+					})
+				}), featured ? /* @__PURE__ */ jsxs("div", {
+					className: MegaMenu_module_default.featured,
+					children: [
+						featured.media ? /* @__PURE__ */ jsx("div", {
+							className: MegaMenu_module_default.featuredMedia,
+							children: featured.media
+						}) : null,
+						/* @__PURE__ */ jsx("p", {
+							className: MegaMenu_module_default.featuredTitle,
+							children: featured.title
+						}),
+						featured.description ? /* @__PURE__ */ jsx("p", {
+							className: MegaMenu_module_default.featuredDescription,
+							children: featured.description
+						}) : null,
+						/* @__PURE__ */ jsxs(Link, {
+							href: featured.href,
+							className: MegaMenu_module_default.featuredLink,
+							children: [featured.linkLabel, /* @__PURE__ */ jsx(ArrowRightIcon, { "aria-hidden": "true" })]
+						})
+					]
+				}) : null]
+			})
+		})]
+	});
+}
+export { MegaMenu };

package/dist/site/MegaMenu/MegaMenu.module.js

@@ -0,0 +1,28 @@
+import './MegaMenu.css';
+// src/site/MegaMenu/MegaMenu.module.css
+var MegaMenu_module_default = {
+	"root": "sti-MegaMenu-root-3a7a0",
+	"trigger": "sti-MegaMenu-trigger-2b51a",
+	"triggerLabel": "sti-MegaMenu-triggerLabel-b66a7",
+	"chevron": "sti-MegaMenu-chevron-2dbe1",
+	"item": "sti-MegaMenu-item-50448",
+	"featuredLink": "sti-MegaMenu-featuredLink-5ed80",
+	"panel": "sti-MegaMenu-panel-9c6ac",
+	"sti-mega-in": "sti-MegaMenu-sti-mega-in-7a06f",
+	"inner": "sti-MegaMenu-inner-ea545",
+	"featured": "sti-MegaMenu-featured-e43c7",
+	"groups": "sti-MegaMenu-groups-d45a9",
+	"group": "sti-MegaMenu-group-f3de8",
+	"groupTitle": "sti-MegaMenu-groupTitle-4651d",
+	"list": "sti-MegaMenu-list-1a2b7",
+	"listItem": "sti-MegaMenu-listItem-6724d",
+	"itemLabel": "sti-MegaMenu-itemLabel-53fb8",
+	"itemIcon": "sti-MegaMenu-itemIcon-813eb",
+	"itemText": "sti-MegaMenu-itemText-ce636",
+	"itemDescription": "sti-MegaMenu-itemDescription-fb772",
+	"badge": "sti-MegaMenu-badge-ef8e3",
+	"featuredMedia": "sti-MegaMenu-featuredMedia-95afb",
+	"featuredTitle": "sti-MegaMenu-featuredTitle-bfd9b",
+	"featuredDescription": "sti-MegaMenu-featuredDescription-0c192"
+};
+export { MegaMenu_module_default as default };

package/dist/site/MegaMenu/index.d.ts

@@ -0,0 +1,2 @@
+import { MegaMenu, MegaMenuFeatured, MegaMenuGroup, MegaMenuItem, MegaMenuProps } from "./MegaMenu.js";
+export { MegaMenu, MegaMenuFeatured, MegaMenuGroup, MegaMenuItem, MegaMenuProps };

package/dist/site/SiteFooter/SiteFooter.css

@@ -0,0 +1,129 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SiteFooter-root-11762 {
+    box-sizing: border-box;
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-subtle);
+    inline-size: 100%;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    container: sti-site-footer / inline-size;
+  }
+
+  .sti-SiteFooter-inner-81393 {
+    gap: var(--sti-space-10);
+    box-sizing: border-box;
+    max-inline-size: var(--sti-width-container);
+    padding: var(--sti-space-12) var(--sti-gutter) var(--sti-space-8);
+    margin-inline: auto;
+    display: grid;
+  }
+
+  .sti-SiteFooter-top-ec4a8 {
+    gap: var(--sti-space-10);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-SiteFooter-about-eeac4 {
+    align-content: start;
+    gap: var(--sti-space-4);
+    min-inline-size: 0;
+    max-inline-size: 22rem;
+    display: grid;
+  }
+
+  .sti-SiteFooter-brand-f9ea5 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-xl);
+    font-weight: var(--sti-font-weight-bold);
+  }
+
+  .sti-SiteFooter-description-a87cb {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-SiteFooter-social-0204b {
+    min-inline-size: 0;
+  }
+
+  .sti-SiteFooter-nav-8ea71 {
+    gap: var(--sti-space-8) var(--sti-space-6);
+    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-SiteFooter-column-c08a6 {
+    align-content: start;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-SiteFooter-columnTitle-f0249 {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-SiteFooter-links-54d8d, .sti-SiteFooter-legalLinks-5b0fd {
+    font-size: var(--sti-font-size-sm);
+    gap: var(--sti-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-SiteFooter-aside-a52ea {
+    min-inline-size: 0;
+    max-inline-size: 26rem;
+  }
+
+  .sti-SiteFooter-bottom-f09db {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-3) var(--sti-space-6);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    flex-wrap: wrap;
+    padding-block-start: var(--sti-space-6);
+    display: flex;
+  }
+
+  .sti-SiteFooter-legal-84d49 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-SiteFooter-legalLinks-5b0fd {
+    gap: var(--sti-space-1) var(--sti-space-5);
+    font-size: var(--sti-font-size-sm);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  @container sti-site-footer (width >= 48rem) {
+    .sti-SiteFooter-top-ec4a8 {
+      gap: var(--sti-space-12);
+      grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
+    }
+
+    .sti-SiteFooter-aside-a52ea {
+      grid-column: 1 / -1;
+      max-inline-size: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-SiteFooter-root-11762, .sti-SiteFooter-bottom-f09db {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/site/SiteFooter/SiteFooter.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+export interface SiteFooterLink {
+  label: string;
+  href: string;
+  /** Başka bir siteye gider: yeni sekmede açılır. */
+  external?: boolean;
+}
+export interface SiteFooterColumn {
+  title: string;
+  links: readonly SiteFooterLink[];
+}
+export interface SiteFooterProps {
+  /** Marka bloğu: logo ve ad. */
+  brand?: ReactNode;
+  /** Markanın altında kısa tanıtım. */
+  description?: ReactNode;
+  /** Marka bloğunun altında sosyal bağlantılar (`SocialLinks`). */
+  social?: ReactNode;
+  columns: readonly SiteFooterColumn[];
+  /** Sütunların yanında yer alan blok (bülten formu). */
+  aside?: ReactNode;
+  /** Alt satır: telif ve şirket bilgisi. */
+  legal?: ReactNode;
+  /** Alt satırın bağlantıları (gizlilik, çerez, KVKK). */
+  legalLinks?: readonly SiteFooterLink[];
+  /** Alt bilgi gezinmesinin adı ("Alt bilgi gezinmesi"). Zorunlu: sunucu bileşeni yerleşik metin taşımaz. */
+  label: string;
+  /** Sütun başlıklarının belge düzeyi; varsayılan 2. */
+  titleLevel?: 2 | 3 | 4;
+  className?: string;
+  id?: string;
+}
+/**
+ * Site alt bilgisi: marka bloğu, bağlantı sütunları, isteğe bağlı bülten alanı ve telif satırı.
+ * Sütunlar genişliğe göre dizilir (kapsayıcı sorgusu): dar ekranda alt alta, geniş ekranda marka
+ * bloğu solda sütunlar sağda. Sunucu bileşenidir.
+ */
+export declare function SiteFooter({ brand, description, social, columns, aside, legal, legalLinks, label, titleLevel, className, id }: SiteFooterProps): import("react").JSX.Element;

package/dist/site/SiteFooter/SiteFooter.js

@@ -0,0 +1,79 @@
+import { Link } from "../../components/Link/Link.js";
+import SiteFooter_module_default from "./SiteFooter.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/SiteFooter/SiteFooter.tsx
+/**
+* Site alt bilgisi: marka bloğu, bağlantı sütunları, isteğe bağlı bülten alanı ve telif satırı.
+* Sütunlar genişliğe göre dizilir (kapsayıcı sorgusu): dar ekranda alt alta, geniş ekranda marka
+* bloğu solda sütunlar sağda. Sunucu bileşenidir.
+*/
+function SiteFooter({ brand, description, social, columns, aside, legal, legalLinks, label, titleLevel = 2, className, id }) {
+	const H = `h${titleLevel}`;
+	return /* @__PURE__ */ jsx("footer", {
+		id,
+		className: [SiteFooter_module_default.root, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: SiteFooter_module_default.inner,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: SiteFooter_module_default.top,
+				children: [
+					brand || description || social ? /* @__PURE__ */ jsxs("div", {
+						className: SiteFooter_module_default.about,
+						children: [
+							brand ? /* @__PURE__ */ jsx("div", {
+								className: SiteFooter_module_default.brand,
+								children: brand
+							}) : null,
+							description ? /* @__PURE__ */ jsx("p", {
+								className: SiteFooter_module_default.description,
+								children: description
+							}) : null,
+							social ? /* @__PURE__ */ jsx("div", {
+								className: SiteFooter_module_default.social,
+								children: social
+							}) : null
+						]
+					}) : null,
+					/* @__PURE__ */ jsx("nav", {
+						className: SiteFooter_module_default.nav,
+						"aria-label": label,
+						children: columns.map((column) => /* @__PURE__ */ jsxs("div", {
+							className: SiteFooter_module_default.column,
+							children: [/* @__PURE__ */ jsx(H, {
+								className: SiteFooter_module_default.columnTitle,
+								children: column.title
+							}), /* @__PURE__ */ jsx("ul", {
+								className: SiteFooter_module_default.links,
+								children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
+									href: link.href,
+									variant: "subtle",
+									external: link.external,
+									children: link.label
+								}) }, link.href + link.label))
+							})]
+						}, column.title))
+					}),
+					aside ? /* @__PURE__ */ jsx("div", {
+						className: SiteFooter_module_default.aside,
+						children: aside
+					}) : null
+				]
+			}), legal || legalLinks?.length ? /* @__PURE__ */ jsxs("div", {
+				className: SiteFooter_module_default.bottom,
+				children: [legal ? /* @__PURE__ */ jsx("p", {
+					className: SiteFooter_module_default.legal,
+					children: legal
+				}) : null, legalLinks?.length ? /* @__PURE__ */ jsx("ul", {
+					className: SiteFooter_module_default.legalLinks,
+					children: legalLinks.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
+						href: link.href,
+						variant: "subtle",
+						external: link.external,
+						children: link.label
+					}) }, link.href + link.label))
+				}) : null]
+			}) : null]
+		})
+	});
+}
+export { SiteFooter };

package/dist/site/SiteFooter/SiteFooter.module.js

@@ -0,0 +1,20 @@
+import './SiteFooter.css';
+// src/site/SiteFooter/SiteFooter.module.css
+var SiteFooter_module_default = {
+	"root": "sti-SiteFooter-root-11762",
+	"inner": "sti-SiteFooter-inner-81393",
+	"top": "sti-SiteFooter-top-ec4a8",
+	"about": "sti-SiteFooter-about-eeac4",
+	"brand": "sti-SiteFooter-brand-f9ea5",
+	"description": "sti-SiteFooter-description-a87cb",
+	"social": "sti-SiteFooter-social-0204b",
+	"nav": "sti-SiteFooter-nav-8ea71",
+	"column": "sti-SiteFooter-column-c08a6",
+	"columnTitle": "sti-SiteFooter-columnTitle-f0249",
+	"links": "sti-SiteFooter-links-54d8d",
+	"legalLinks": "sti-SiteFooter-legalLinks-5b0fd",
+	"aside": "sti-SiteFooter-aside-a52ea",
+	"bottom": "sti-SiteFooter-bottom-f09db",
+	"legal": "sti-SiteFooter-legal-84d49"
+};
+export { SiteFooter_module_default as default };

package/dist/site/SiteFooter/index.d.ts

@@ -0,0 +1,2 @@
+import { SiteFooter, SiteFooterColumn, SiteFooterLink, SiteFooterProps } from "./SiteFooter.js";
+export { SiteFooter, SiteFooterColumn, SiteFooterLink, SiteFooterProps };

package/dist/site/SiteHeader/SiteHeader.css

@@ -0,0 +1,213 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SiteHeader-root-cbb15 {
+    z-index: var(--sti-z-header);
+    box-sizing: border-box;
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-canvas);
+    inline-size: 100%;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    transition: background-color var(--sti-duration-base) var(--sti-ease-out),
+      border-color var(--sti-duration-base) var(--sti-ease-out);
+    position: relative;
+    container: sti-site-header / inline-size;
+  }
+
+  .sti-SiteHeader-root-cbb15[data-sticky] {
+    position: sticky;
+    inset-block-start: 0;
+  }
+
+  .sti-SiteHeader-root-cbb15[data-variant="transparent"]:not([data-scrolled], [data-open]) {
+    background: none;
+    border-block-end-color: #0000;
+  }
+
+  .sti-SiteHeader-bar-22cb7 {
+    align-items: center;
+    gap: var(--sti-space-4);
+    box-sizing: border-box;
+    max-inline-size: var(--sti-width-container);
+    min-block-size: var(--sti-height-topbar);
+    padding-inline: var(--sti-gutter);
+    margin-inline: auto;
+    display: flex;
+  }
+
+  .sti-SiteHeader-brand-c45d2 {
+    min-block-size: var(--sti-control-h-md);
+    border-radius: var(--sti-radius-sm);
+    color: inherit;
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-xl);
+    font-weight: var(--sti-font-weight-bold);
+    cursor: pointer;
+    outline: none;
+    flex: none;
+    align-items: center;
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  .sti-SiteHeader-brand-c45d2[data-focus-visible], .sti-SiteHeader-link-49b41[data-focus-visible], .sti-SiteHeader-menuButton-d6e8b[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-SiteHeader-nav-f3ca8, .sti-SiteHeader-actions-1c0c1 {
+    display: none;
+  }
+
+  .sti-SiteHeader-menuButton-d6e8b {
+    inline-size: var(--sti-control-h-md);
+    block-size: var(--sti-control-h-md);
+    border: var(--sti-border-width) solid var(--sti-border-control);
+    border-radius: var(--sti-radius-md);
+    color: inherit;
+    font-size: var(--sti-icon-md);
+    cursor: pointer;
+    background: none;
+    outline: none;
+    justify-content: center;
+    align-items: center;
+    margin-inline-start: auto;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    .sti-SiteHeader-menuButton-d6e8b[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-SiteHeader-menuButton-d6e8b[data-pressed] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-SiteHeader-list-63da3, .sti-SiteHeader-mobileList-924f6 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-SiteHeader-list-63da3 {
+    align-items: center;
+    gap: var(--sti-space-1);
+  }
+
+  .sti-SiteHeader-mobileList-924f6 {
+    gap: var(--sti-space-1);
+    flex-direction: column;
+  }
+
+  .sti-SiteHeader-listItem-0ce78, .sti-SiteHeader-mobileItem-a76d6 {
+    min-inline-size: 0;
+  }
+
+  .sti-SiteHeader-link-49b41 {
+    box-sizing: border-box;
+    min-block-size: var(--sti-control-h-md);
+    padding-inline: var(--sti-space-3);
+    border-radius: var(--sti-radius-md);
+    color: inherit;
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-medium);
+    cursor: pointer;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-out);
+    outline: none;
+    align-items: center;
+    text-decoration: none;
+    display: flex;
+  }
+
+  @media (hover: hover) {
+    .sti-SiteHeader-link-49b41[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-SiteHeader-link-49b41[data-pressed] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-SiteHeader-link-49b41[data-current] {
+    color: var(--sti-fg-accent);
+  }
+
+  .sti-SiteHeader-panel-cefd7 {
+    box-sizing: border-box;
+    max-block-size: calc(100dvh - var(--sti-height-topbar));
+    padding: var(--sti-space-2) var(--sti-gutter) var(--sti-space-6);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-canvas);
+    box-shadow: var(--sti-shadow-lg);
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline: 0;
+    overflow-y: auto;
+  }
+
+  .sti-SiteHeader-panel-cefd7[hidden] {
+    display: none;
+  }
+
+  .sti-SiteHeader-mobileActions-aa606 {
+    gap: var(--sti-space-2);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    margin-block-start: var(--sti-space-4);
+    padding-block-start: var(--sti-space-4);
+    display: grid;
+  }
+
+  @container sti-site-header (width >= 56rem) {
+    .sti-SiteHeader-nav-f3ca8 {
+      margin-inline-start: var(--sti-space-4);
+      display: block;
+    }
+
+    .sti-SiteHeader-actions-1c0c1 {
+      align-items: center;
+      gap: var(--sti-space-2);
+      margin-inline-start: auto;
+      display: flex;
+    }
+
+    .sti-SiteHeader-menuButton-d6e8b, .sti-SiteHeader-panel-cefd7 {
+      display: none;
+    }
+  }
+
+  @media (pointer: coarse) {
+    .sti-SiteHeader-link-49b41, .sti-SiteHeader-brand-c45d2 {
+      min-block-size: var(--sti-control-h-md);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-SiteHeader-root-cbb15, .sti-SiteHeader-link-49b41 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-SiteHeader-root-cbb15, .sti-SiteHeader-panel-cefd7 {
+      border-block-end-color: canvastext;
+    }
+
+    .sti-SiteHeader-menuButton-d6e8b {
+      border-color: buttontext;
+    }
+
+    .sti-SiteHeader-link-49b41[data-current] {
+      color: highlight;
+      text-decoration: underline;
+    }
+
+    .sti-SiteHeader-brand-c45d2[data-focus-visible], .sti-SiteHeader-link-49b41[data-focus-visible], .sti-SiteHeader-menuButton-d6e8b[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+}