{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "header", "title": "Header", "type": "registry:block", "description": "Site header collection: sticky top bar, dismissible announcement stack, centered-logo split, floating pill, full-width mega menu, inline search with command palette, and a transparent-over-hero scroll variant — each with a mobile sheet fallback.", "categories": [ "marketing" ], "files": [ { "path": "packages/elements-lit/src/blocks/header/header.ts", "content": "import { LitElement, css, html, isServer, nothing } from 'lit'\nimport {\n ArrowRight,\n BarChart3,\n BookOpen,\n Boxes,\n CircleDot,\n Compass,\n FileText,\n History,\n Layers,\n LifeBuoy,\n Lock,\n Menu,\n Search,\n ShoppingBag,\n User,\n Users,\n Workflow,\n X,\n type IconNode,\n} from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/command/command'\nimport '../../components/kbd/kbd'\nimport '../../components/navigation-menu/navigation-menu'\nimport '../../components/separator/separator'\nimport '../../components/sheet/sheet'\n\nexport type HeaderVariant =\n | 'default'\n | 'announcement'\n | 'centered'\n | 'pill'\n | 'mega'\n | 'search'\n | 'transparent'\n\nconst STORAGE_KEY = 'uipkge:announcement-dismissed'\n\nconst defaultLinks = [\n { label: 'Features', href: '#features' },\n { label: 'Pricing', href: '#pricing' },\n { label: 'Customers', href: '#customers' },\n { label: 'Docs', href: '#docs' },\n { label: 'Blog', href: '#blog' },\n]\n\nconst stackLinks = [\n { label: 'Platform', href: '#platform' },\n { label: 'Pricing', href: '#pricing' },\n { label: 'Customers', href: '#customers' },\n { label: 'Docs', href: '#docs' },\n]\n\nconst centeredLeft = [\n { label: 'Collections', href: '#collections' },\n { label: 'New in', href: '#new' },\n { label: 'Studio', href: '#studio' },\n]\nconst centeredRight = [\n { label: 'Journal', href: '#journal' },\n { label: 'Stockists', href: '#stockists' },\n { label: 'Contact', href: '#contact' },\n]\nconst centeredLinkClass =\n 'text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none'\n\nconst pillLinks = [\n { label: 'Product', href: '#product' },\n { label: 'Pricing', href: '#pricing' },\n { label: 'Customers', href: '#customers' },\n { label: 'Docs', href: '#docs' },\n]\n\ninterface MegaItem {\n icon: IconNode\n iconName: string\n title: string\n body: string\n}\n\ninterface MegaMenu {\n label: string\n groups: { heading: string; items: MegaItem[] }[]\n highlight: { title: string; body: string; cta: string }\n}\n\n// `iconName` beside each icon node: lucide nodes don't carry their kebab-case\n// name, which icon() needs for the lucide- class.\nconst megaMenus: MegaMenu[] = [\n {\n label: 'Product',\n groups: [\n {\n heading: 'Core',\n items: [\n { icon: Boxes, iconName: 'boxes', title: 'Metric layer', body: 'Versioned definitions your whole org shares.' },\n {\n icon: BarChart3,\n iconName: 'chart-column',\n title: 'Dashboards',\n body: 'Composed from certified metrics, not raw SQL.',\n },\n { icon: Workflow, iconName: 'workflow', title: 'Pipelines', body: 'Scheduled materialisation with cost ceilings.' },\n ],\n },\n {\n heading: 'Governance',\n items: [\n { icon: Lock, iconName: 'lock', title: 'Row-level access', body: 'Scope evaluated per query, per identity.' },\n {\n icon: BookOpen,\n iconName: 'book-open',\n title: 'Change history',\n body: 'Every definition edit reviewed and revertible.',\n },\n {\n icon: LifeBuoy,\n iconName: 'life-buoy',\n title: 'Audit exports',\n body: 'Generated from the same history, not by hand.',\n },\n ],\n },\n ],\n highlight: {\n title: 'Ship your first dashboard today',\n body: 'Connect a warehouse, publish one certified metric, and invite the team. No migration required.',\n cta: 'Start the walkthrough',\n },\n },\n {\n label: 'Resources',\n groups: [\n {\n heading: 'Learn',\n items: [\n {\n icon: BookOpen,\n iconName: 'book-open',\n title: 'Documentation',\n body: 'Setup, modelling, and the access model.',\n },\n { icon: Layers, iconName: 'layers', title: 'Guides', body: 'Reconciliation and first-close checklists.' },\n {\n icon: BarChart3,\n iconName: 'chart-column',\n title: 'Benchmarks',\n body: 'Close speed across 240 finance teams.',\n },\n ],\n },\n {\n heading: 'Support',\n items: [\n {\n icon: LifeBuoy,\n iconName: 'life-buoy',\n title: 'Help centre',\n body: 'Answers to the questions support gets most.',\n },\n { icon: Workflow, iconName: 'workflow', title: 'Status', body: 'Live uptime and incident history.' },\n { icon: Lock, iconName: 'lock', title: 'Trust centre', body: 'SOC 2, subprocessors, and data residency.' },\n ],\n },\n ],\n highlight: {\n title: 'Read the rollout plan',\n body: 'The five-week implementation we run for every customer, written down so you can run it yourself.',\n cta: 'Open the plan',\n },\n },\n]\n\nconst megaPlainLinks = [\n { label: 'Pricing', href: '#pricing' },\n { label: 'Customers', href: '#customers' },\n]\n\nconst searchLinks = [\n { label: 'Product', href: '#product' },\n { label: 'Pricing', href: '#pricing' },\n { label: 'Docs', href: '#docs' },\n]\n\nconst searchGroups: { heading: string; items: { icon: IconNode; iconName: string; label: string }[] }[] = [\n {\n heading: 'Documentation',\n items: [\n { icon: BookOpen, iconName: 'book-open', label: 'Connect a warehouse' },\n { icon: FileText, iconName: 'file-text', label: 'Define your first metric' },\n { icon: BarChart3, iconName: 'chart-column', label: 'Publish a dashboard' },\n ],\n },\n {\n heading: 'Company',\n items: [\n { icon: Users, iconName: 'users', label: 'Customer stories' },\n { icon: History, iconName: 'history', label: 'Changelog' },\n ],\n },\n]\n\nconst transparentLinks = [\n { label: 'Product', href: '#product' },\n { label: 'Solutions', href: '#solutions' },\n { label: 'Pricing', href: '#pricing' },\n { label: 'Docs', href: '#docs' },\n]\n\n/**\n * — the registry Header block collection as a web component.\n *\n * One block, one install unit: `variant` selects the section\n * ('default' | 'announcement' | 'centered' | 'pill' | 'mega' | 'search' |\n * 'transparent'). Class strings are React's verbatim per variant. React state\n * (useState) becomes @state fields; mobile Sheets become (open +\n * open-change), the mega dropdowns become , and the\n * search palette becomes . Timers, scroll / keydown\n * listeners and the pill ResizeObserver are all torn down in\n * disconnectedCallback.\n */\nexport class UipHeader extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n variant: { reflect: true },\n sheetOpen: { state: true },\n dismissed: { state: true },\n pillActive: { state: true },\n indicator: { state: true },\n searchOpen: { state: true },\n scrolled: { state: true },\n }\n\n variant: HeaderVariant = 'default'\n private sheetOpen = false\n private dismissed = false\n private pillActive = 0\n private indicator = { left: 0, width: 0 }\n private searchOpen = false\n private scrolled = false\n private observer?: ResizeObserver\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'header')\n if (isServer) return\n try {\n if (window.sessionStorage.getItem(STORAGE_KEY) === '1') this.dismissed = true\n } catch {\n // Blocked storage: the strip stays visible, like React's first paint.\n }\n window.addEventListener('scroll', this.onScroll, { passive: true })\n this.onScroll()\n window.addEventListener('keydown', this.onKeydown)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n window.removeEventListener('scroll', this.onScroll)\n window.removeEventListener('keydown', this.onKeydown)\n this.observer?.disconnect()\n this.observer = undefined\n }\n\n firstUpdated() {\n this.measurePill()\n if (typeof ResizeObserver === 'undefined') return\n this.observer = new ResizeObserver(() => this.measurePill())\n const nav = this.renderRoot.querySelector('[data-pill-nav]')\n if (nav) this.observer.observe(nav)\n }\n\n private onScroll = () => {\n this.scrolled = window.scrollY > 24\n }\n\n private onKeydown = (e: KeyboardEvent) => {\n if (e.key.toLowerCase() !== 'k' || !(e.metaKey || e.ctrlKey)) return\n e.preventDefault()\n this.searchOpen = !this.searchOpen\n }\n\n private dismiss() {\n this.dismissed = true\n try {\n window.sessionStorage.setItem(STORAGE_KEY, '1')\n } catch {\n // Blocked storage: the dismissal still holds for this page view.\n }\n }\n\n // Measured from the live element, so the indicator fits any label length or\n // font — no hard-coded widths to drift out of sync with the copy.\n private measurePill(index = this.pillActive) {\n const links = this.renderRoot.querySelectorAll('[data-pill-link]')\n const el = links[index]\n if (el) this.indicator = { left: el.offsetLeft, width: el.offsetWidth }\n }\n\n private mobileSheet(heading: string, body: unknown, side: 'right' | 'left' | 'top' = 'right') {\n return html`\n ) => {\n this.sheetOpen = e.detail.open\n }}\n >\n ${body}\n \n `\n }\n\n render() {\n switch (this.variant) {\n case 'announcement':\n return this.renderAnnouncement()\n case 'centered':\n return this.renderCentered()\n case 'pill':\n return this.renderPill()\n case 'mega':\n return this.renderMega()\n case 'search':\n return this.renderSearch()\n case 'transparent':\n return this.renderTransparent()\n default:\n return this.renderDefault()\n }\n }\n\n private renderDefault() {\n return html`\n \n
\n \n
\n ${icon(Boxes, 'boxes', 'size-4')}\n
\n Acme\n \n\n \n\n
\n Sign in\n Start free trial\n
\n\n
\n ${this.mobileSheet(\n 'Acme',\n html`\n \n ${icon(Menu, 'menu', 'size-5')}\n \n \n
\n Sign in\n Start free trial\n
\n `,\n )}\n
\n
\n \n `\n }\n\n private renderAnnouncement() {\n return html`\n
\n ${!this.dismissed\n ? html`\n
\n
\n New\n

\n Row-level scoping now evaluates against SCIM groups.\n \n Read the changelog\n \n

\n ${icon(ArrowRight, 'arrow-right', 'text-muted-foreground hidden size-3.5 shrink-0 sm:block')}\n \n ${icon(X, 'x', 'size-3.5')}\n \n
\n
\n `\n : ''}\n
\n
\n \n ${icon(Layers, 'layers', 'text-primary size-5')} Northwind\n \n\n \n\n \n\n
\n ${this.mobileSheet(\n 'Menu',\n html`\n \n ${icon(Menu, 'menu', 'size-5')}\n \n \n \n
\n Sign in\n Book a demo\n
\n `,\n )}\n
\n
\n
\n
\n `\n }\n\n private renderCentered() {\n return html`\n
\n
\n \n\n
\n ${this.mobileSheet(\n 'Menu',\n html`\n \n ${icon(Menu, 'menu', 'size-5')}\n \n \n \n Account\n `,\n 'left',\n )}\n
\n\n \n ${icon(Compass, 'compass', 'text-primary size-4')} Halden\n \n\n \n\n
\n \n ${icon(User, 'user', 'size-4')}\n \n \n ${icon(ShoppingBag, 'shopping-bag', 'size-4')}\n \n
\n
\n
\n `\n }\n\n private renderPill() {\n return html`\n
\n \n \n ${icon(CircleDot, 'circle-dot', 'text-primary size-4')} Verity\n \n\n \n\n Start free\n\n
\n ${this.mobileSheet(\n 'Menu',\n html`\n \n ${icon(Menu, 'menu', 'size-5')}\n \n \n `,\n 'top',\n )}\n
\n \n
\n `\n }\n\n private renderMega() {\n return html`\n
\n
\n \n ${icon(Layers, 'layers', 'text-primary size-5')} Northwind\n \n\n
\n \n ${megaMenus.map(\n (menu) => html`\n \n ${menu.label}\n
\n ${menu.groups.map(\n (group) => html`\n
\n

\n ${group.heading}\n

\n
    \n ${group.items.map(\n (item) => html`\n
  • \n \n ${icon(item.icon, item.iconName, 'text-muted-foreground mt-0.5 size-4 shrink-0')}\n \n ${item.title}\n ${item.body}\n \n \n
    • \n `,\n )}\n
\n
\n `,\n )}\n
\n

${menu.highlight.title}

\n

${menu.highlight.body}

\n \n ${menu.highlight.cta} ${icon(ArrowRight, 'arrow-right', 'ml-1 size-3')}\n \n
\n
\n \n `,\n )}\n ${megaPlainLinks.map(\n (link) => html`\n \n ${link.label}\n \n `,\n )}\n \n
\n\n
\n \n Sign in\n \n \n \n \n Book a demo\n
\n\n
\n ${this.mobileSheet(\n 'Menu',\n html`\n \n ${icon(Menu, 'menu', 'size-5')}\n \n \n `,\n )}\n
\n
\n
\n `\n }\n\n private renderSearch() {\n return html`\n
\n
\n \n ${icon(Compass, 'compass', 'text-primary size-5')} Halden\n \n\n \n\n {\n this.searchOpen = true\n }}\n >\n ${icon(Search, 'search', 'size-4 shrink-0')}\n Search docs…\n \n ⌘K\n \n \n\n \n \n \n \n Start free\n \n\n
\n ${this.mobileSheet(\n 'Menu',\n html`\n \n ${icon(Menu, 'menu', 'size-5')}\n \n \n \n
\n Sign in\n Start free\n
\n `,\n )}\n
\n
\n\n ) => {\n this.searchOpen = e.detail.open\n }}\n >\n No results.\n ${searchGroups.map(\n (group) => html`\n \n ${group.items.map(\n (item) => html`\n \n ${icon(item.icon, item.iconName, 'text-muted-foreground mr-2 size-4')} ${item.label}\n \n `,\n )}\n \n `,\n )}\n \n
\n `\n }\n\n private renderTransparent() {\n return html`\n \n
\n \n ${icon(Layers, 'layers', 'text-primary size-5')} Northwind\n \n\n \n\n \n\n
\n ${this.mobileSheet(\n 'Menu',\n html`\n \n ${icon(Menu, 'menu', 'size-5')}\n \n \n \n
\n Sign in\n Start free\n
\n `,\n )}\n
\n
\n \n `\n }\n}\n\ncustomElements.get('uip-header') || customElements.define('uip-header', UipHeader)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-header': UipHeader\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/header/header.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/command.json", "https://uipkge.dev/r/lit/kbd.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/navigation-menu.json", "https://uipkge.dev/r/lit/separator.json", "https://uipkge.dev/r/lit/sheet.json" ] }