{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "footer",
  "title": "Footer",
  "type": "registry:block",
  "description": "Site footer collection: multi-column newsletter, oversized brand statement, dense developer grid, mega newsletter, single-row minimal, and dense sitemap variants — each spelled out inline so copy lives in one place.",
  "categories": [
    "marketing"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/footer/footer.ts",
      "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { ArrowRight, Boxes, Check, Globe, Layers } 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/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/select/select'\nimport type { UipSelect } from '../../components/select/select'\n\n// lucide no longer ships brand glyphs, so they are inlined here the same way\n// the React footer blocks do it.\nconst githubSvg = (cls: string) => html`<svg\n  class=${cls}\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n>\n  <path\n    d=\"M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z\"\n  />\n</svg>`\n\nconst twitterSvg = (cls: string) => html`<svg\n  class=${cls}\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n>\n  <path\n    d=\"M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z\"\n  />\n</svg>`\n\nconst linkedinSvg = (cls: string) => html`<svg\n  class=${cls}\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n>\n  <path\n    d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\"\n  />\n</svg>`\n\nconst youtubeSvg = (cls: string) => html`<svg\n  class=${cls}\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n>\n  <path\n    d=\"M23.5 6.2a3 3 0 00-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 00.5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 002.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 002.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z\"\n  />\n</svg>`\n\nconst brandSections = [\n  { heading: 'Platform', links: ['Metric layer', 'Governance', 'Alerting', 'Embedding'] },\n  { heading: 'Company', links: ['About', 'Careers', 'Customers', 'Press kit'] },\n  { heading: 'Resources', links: ['Documentation', 'Guides', 'Benchmarks', 'Status'] },\n]\n\nconst megaSections = [\n  { heading: 'Product', links: ['Metric layer', 'Dashboards', 'Alerting', 'Embedding', 'Changelog'] },\n  { heading: 'Solutions', links: ['Finance', 'RevOps', 'Analytics', 'Engineering'] },\n  { heading: 'Developers', links: ['Documentation', 'API reference', 'CLI', 'Status'] },\n  { heading: 'Company', links: ['About', 'Careers', 'Customers', 'Press kit'] },\n  { heading: 'Legal', links: ['Privacy', 'Terms', 'DPA', 'Subprocessors'] },\n]\n\nconst sitemapSections = [\n  { heading: 'Platform', links: ['Metric layer', 'Dashboards', 'Alerting', 'Embedding', 'API', 'CLI'] },\n  { heading: 'Solutions', links: ['Finance', 'RevOps', 'Analytics', 'Engineering', 'Healthcare', 'Retail'] },\n  { heading: 'Developers', links: ['Documentation', 'API reference', 'SDKs', 'Webhooks', 'Status', 'Changelog'] },\n  { heading: 'Resources', links: ['Guides', 'Benchmarks', 'Customers', 'Blog', 'Webinars', 'Glossary'] },\n  { heading: 'Company', links: ['About', 'Careers', 'Press kit', 'Partners', 'Contact', 'Security'] },\n  { heading: 'Legal', links: ['Privacy', 'Terms', 'DPA', 'Subprocessors', 'SLA', 'Accessibility'] },\n]\n\nconst denseColumns: { title: string; links: { label: string; href: string; badge?: string }[] }[] = [\n  {\n    title: 'UI Primitives',\n    links: [\n      { label: 'Button & Controls', href: '#' },\n      { label: 'Dialog & Overlays', href: '#' },\n      { label: 'Data Table & Virtual', href: '#' },\n      { label: 'Charts & Sparklines', href: '#' },\n      { label: 'Form Controls & Inputs', href: '#' },\n      { label: 'KpiGrid & Metric Tiles', href: '#' },\n    ],\n  },\n  {\n    title: 'Marketing Blocks',\n    links: [\n      { label: 'Hero Sandboxes', href: '#' },\n      { label: 'Feature Workbenches', href: '#' },\n      { label: 'Pricing Matrix & ROI', href: '#' },\n      { label: 'Social Proof Tickers', href: '#' },\n      { label: 'Testimonial Masonry', href: '#' },\n      { label: 'Interactive Demos', href: '#', badge: 'New' },\n    ],\n  },\n  {\n    title: 'Ecosystem Templates',\n    links: [\n      { label: 'HRMS Nuxt Template', href: '#' },\n      { label: 'HMS Clinical Dashboard', href: '#' },\n      { label: 'Shipment Tracking Live', href: '#' },\n      { label: 'Fintech Banking Portal', href: '#' },\n      { label: 'AI LLM Workspace', href: '#' },\n    ],\n  },\n  {\n    title: 'Developer DX',\n    links: [\n      { label: 'CLI Installation Guide', href: '#' },\n      { label: 'Tailwind CSS v4 Tokens', href: '#' },\n      { label: 'Dual-Framework Parity', href: '#' },\n      { label: 'Reka UI Primitives', href: '#' },\n      { label: 'Radix UI Primitives', href: '#' },\n      { label: 'Changelog Timeline', href: '#' },\n    ],\n  },\n]\n\nconst footer01Columns = [\n  { title: 'Product', links: ['Features', 'Pricing', 'Changelog', 'Roadmap'] },\n  { title: 'Company', links: ['About', 'Blog', 'Careers', 'Contact'] },\n  { title: 'Resources', links: ['Documentation', 'API', 'Help center', 'Status'] },\n  { title: 'Legal', links: ['Terms', 'Privacy', 'Security', 'DPA'] },\n]\n\nconst minimalLinks = [\n  { label: 'Product', href: '#product' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Docs', href: '#docs' },\n  { label: 'Privacy', href: '#privacy' },\n  { label: 'Terms', href: '#terms' },\n]\n\nexport type FooterVariant =\n  | 'footer-01'\n  | 'brand-statement'\n  | 'developer-dense-grid'\n  | 'mega-newsletter'\n  | 'minimal-row'\n  | 'sitemap-dense'\n\n/**\n * <uip-footer> — the registry footer block collection as one web component.\n *\n * Class strings are React's Footer01 / FooterBrandStatement /\n * FooterDeveloperDenseGrid / FooterMegaNewsletter / FooterMinimalRow /\n * FooterSitemapDense verbatim; `variant` selects which one renders\n * (`footer-01` by default). Newsletter forms are internal state like React\n * (no callbacks); the sitemap region/currency selects are <uip-select>\n * reading light-DOM <option> children. Brand glyphs stay inline SVGs, the\n * way the React blocks ship them.\n */\nexport class UipFooter 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    newsletter: { state: true },\n    subscribed: { state: true },\n    megaEmail: { state: true },\n    megaSubmitted: { state: true },\n    region: { state: true },\n    currency: { state: true },\n  }\n\n  variant: FooterVariant = 'footer-01'\n  private newsletter = ''\n  private subscribed = false\n  private megaEmail = ''\n  private megaSubmitted = false\n  private region = 'eu'\n  private currency = 'eur'\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', 'footer')\n  }\n\n  private subscribe01(e: Event) {\n    e.preventDefault()\n    if (!this.newsletter) return\n    this.subscribed = true\n    this.newsletter = ''\n  }\n\n  private subscribeMega(e: Event) {\n    e.preventDefault()\n    if (!this.megaEmail.trim()) return\n    this.megaSubmitted = true\n  }\n\n  private renderFooter01() {\n    return html`\n      <footer data-slot=\"footer-01\" class=\"bg-background border-t\">\n        <div class=\"mx-auto max-w-6xl px-6 py-16\">\n          <div class=\"grid gap-10 lg:grid-cols-12\">\n            <div class=\"space-y-4 lg:col-span-4\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n                  ${icon(Boxes, 'boxes', 'size-4')}\n                </div>\n                <span class=\"text-base font-semibold\">Acme</span>\n              </div>\n              <p class=\"text-muted-foreground max-w-sm text-sm\">Built on shadcn-vue. Get product updates monthly.</p>\n              <form class=\"flex max-w-sm gap-2\" @submit=${this.subscribe01}>\n                <uip-input\n                  .value=${this.newsletter}\n                  @input=${(e: Event) => {\n                    this.newsletter = (e.target as UipInput).value\n                  }}\n                  type=\"email\"\n                  placeholder=\"you@company.com\"\n                  required\n                  class=\"flex-1\"\n                ></uip-input>\n                <uip-button type=\"submit\">Subscribe</uip-button>\n              </form>\n              ${this.subscribed\n                ? html`<p class=\"text-success text-xs\">Thanks — check your inbox to confirm.</p>`\n                : nothing}\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-6 sm:grid-cols-4 lg:col-span-8\">\n              ${footer01Columns.map(\n                (col) => html`<div class=\"space-y-3\">\n                  <h3 class=\"text-sm font-semibold\">${col.title}</h3>\n                  <ul class=\"space-y-2\">\n                    ${col.links.map(\n                      (link) => html`<li>\n                        <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                          ${link}\n                        </a>\n                      </li>`,\n                    )}\n                  </ul>\n                </div>`,\n              )}\n            </div>\n          </div>\n\n          <div\n            data-uipkge=\"\"\n            data-slot=\"separator\"\n            data-orientation=\"horizontal\"\n            role=\"none\"\n            class=\"bg-border shrink-0 h-px w-full my-10\"\n          ></div>\n\n          <div class=\"flex flex-wrap items-center justify-between gap-4\">\n            <p class=\"text-muted-foreground text-xs\">© 2026 Acme. All rights reserved.</p>\n            <div class=\"flex items-center gap-3\">\n              <a href=\"#\" aria-label=\"GitHub\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n                ${githubSvg('size-4')}\n              </a>\n              <a href=\"#\" aria-label=\"Twitter\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n                ${twitterSvg('size-4')}\n              </a>\n              <a href=\"#\" aria-label=\"LinkedIn\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n                ${linkedinSvg('size-4')}\n              </a>\n            </div>\n          </div>\n        </div>\n      </footer>\n    `\n  }\n\n  private renderBrandStatement() {\n    return html`\n      <footer data-slot=\"footer-brand-statement\" class=\"border-border bg-background border-t\">\n        <div class=\"mx-auto max-w-6xl px-6 py-16\">\n          <a href=\"#top\" class=\"flex w-fit items-center gap-2 font-semibold tracking-tight\">\n            ${icon(Layers, 'layers', 'text-primary size-5')} Northwind\n          </a>\n\n          <p class=\"mt-8 max-w-3xl text-2xl leading-tight font-medium tracking-tight text-balance sm:text-3xl\">\n            Every number your company acts on should have one definition, one owner, and a history you can read.\n          </p>\n          <p class=\"text-muted-foreground mt-4 max-w-xl text-sm leading-relaxed\">\n            That is the whole product. Everything else here is detail.\n          </p>\n\n          <div\n            data-uipkge=\"\"\n            data-slot=\"separator\"\n            data-orientation=\"horizontal\"\n            role=\"none\"\n            class=\"bg-border shrink-0 h-px w-full my-12\"\n          ></div>\n\n          <div class=\"grid grid-cols-2 gap-8 sm:grid-cols-3\">\n            ${brandSections.map(\n              (section) => html`<div>\n                <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">${section.heading}</p>\n                <ul class=\"mt-3 space-y-2\">\n                  ${section.links.map(\n                    (link) => html`<li>\n                      <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                        ${link}\n                      </a>\n                    </li>`,\n                  )}\n                </ul>\n              </div>`,\n            )}\n          </div>\n\n          <div\n            data-uipkge=\"\"\n            data-slot=\"separator\"\n            data-orientation=\"horizontal\"\n            role=\"none\"\n            class=\"bg-border shrink-0 h-px w-full my-10\"\n          ></div>\n\n          <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-2 text-xs\">\n              <span>© 2026 Northwind Data, Inc.</span>\n              <a href=\"#privacy\" class=\"hover:text-foreground transition-colors\">Privacy</a>\n              <a href=\"#terms\" class=\"hover:text-foreground transition-colors\">Terms</a>\n              <a href=\"mailto:hello@northwind.example\" class=\"hover:text-foreground transition-colors\">\n                hello@northwind.example\n              </a>\n            </div>\n            <div class=\"flex items-center gap-2 sm:ml-auto\">\n              <uip-badge variant=\"outline\">SOC 2 Type II</uip-badge>\n              <uip-badge variant=\"outline\">GDPR</uip-badge>\n              <uip-button variant=\"ghost\" size=\"icon-sm\" class=\"size-8\" aria-label=\"GitHub\">\n                ${githubSvg('size-4')}\n              </uip-button>\n              <uip-button variant=\"ghost\" size=\"icon-sm\" class=\"size-8\" aria-label=\"LinkedIn\">\n                ${linkedinSvg('size-4')}\n              </uip-button>\n            </div>\n          </div>\n        </div>\n      </footer>\n    `\n  }\n\n  private renderDeveloperDenseGrid() {\n    const year = new Date().getFullYear()\n    return html`\n      <footer data-slot=\"footer-developer-dense-grid\" class=${cn('border-border bg-card text-foreground border-t')}>\n        <div class=\"mx-auto max-w-7xl space-y-12 px-4 py-12 sm:px-6 sm:py-16 lg:px-8\">\n          <div class=\"grid grid-cols-2 gap-8 text-left md:grid-cols-6 lg:grid-cols-12\">\n            <div class=\"col-span-2 space-y-4 md:col-span-6 lg:col-span-4\">\n              <div class=\"flex items-center gap-2 font-mono text-base font-bold tracking-tight\">\n                <span\n                  class=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-lg text-xs font-bold shadow-xs\"\n                >\n                  U\n                </span>\n                <span>UIPKGE.DEV</span>\n              </div>\n\n              <p class=\"text-muted-foreground max-w-sm text-xs leading-relaxed\">\n                The open-source unbundled component registry where you own 100% of the source code. Calibrated tokens,\n                pure AST distribution, and mathematical dual-framework parity across Vue 3.5 and React 19.\n              </p>\n\n              <div class=\"flex items-center gap-2 pt-2\">\n                <uip-button size=\"icon-sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"GitHub\">\n                  ${githubSvg('size-3.5')}\n                </uip-button>\n                <uip-button size=\"icon-sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"Twitter\">\n                  ${twitterSvg('size-3.5')}\n                </uip-button>\n                <uip-button size=\"icon-sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"Website\">\n                  ${icon(Globe, 'globe', 'size-3.5')}\n                </uip-button>\n              </div>\n            </div>\n\n            ${denseColumns.map(\n              (col) => html`<div class=\"col-span-1 space-y-3 md:col-span-3 lg:col-span-2\">\n                <h4 class=\"text-foreground font-mono text-xs font-bold tracking-wider uppercase\">${col.title}</h4>\n                <ul class=\"text-muted-foreground space-y-2 font-mono text-xs\">\n                  ${col.links.map(\n                    (link) => html`<li>\n                      <a href=${link.href} class=\"hover:text-foreground inline-flex items-center gap-1.5 transition-colors\">\n                        <span>${link.label}</span>\n                        ${link.badge\n                          ? html`<span class=\"py-0.2 bg-primary/20 text-primary rounded px-1.5 text-xs font-bold uppercase\">\n                              ${link.badge}\n                            </span>`\n                          : nothing}\n                      </a>\n                    </li>`,\n                  )}\n                </ul>\n              </div>`,\n            )}\n          </div>\n\n          <div\n            class=\"border-border/80 text-muted-foreground flex flex-col items-center justify-between gap-4 border-t pt-8 text-center font-mono text-xs sm:flex-row sm:text-left\"\n          >\n            <div class=\"flex items-center gap-2.5\">\n              <span class=\"relative flex size-2\">\n                <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\"></span>\n                <span class=\"bg-success relative inline-flex size-2 rounded-full\"></span>\n              </span>\n              <span class=\"text-foreground font-medium\">All Global Edge Nodes Operational</span>\n              <span class=\"text-muted-foreground/60\">&bull; Latency: 14ms (P99)</span>\n            </div>\n\n            <div class=\"flex items-center gap-3\">\n              <span>MIT Licensed &bull; Unbundled Code</span>\n              <span>&copy; ${year} UIPKGE</span>\n            </div>\n          </div>\n        </div>\n      </footer>\n    `\n  }\n\n  private renderMegaNewsletter() {\n    return html`\n      <footer data-slot=\"footer-mega-newsletter\" class=\"border-border bg-background border-t\">\n        <div class=\"mx-auto max-w-6xl px-6 py-14\">\n          <div class=\"grid gap-12 lg:grid-cols-[22rem_1fr] lg:gap-16\">\n            <div>\n              <a href=\"#top\" class=\"flex items-center gap-2 font-semibold tracking-tight\">\n                ${icon(Layers, 'layers', 'text-primary size-5')} Northwind\n              </a>\n              <p class=\"text-muted-foreground mt-3 max-w-sm text-sm leading-relaxed\">\n                One certified metric layer between your warehouse and everything downstream.\n              </p>\n\n              <form class=\"mt-6\" @submit=${this.subscribeMega}>\n                <label for=\"footer-email\" class=\"text-sm font-medium\">Monthly engineering notes</label>\n                <div class=\"mt-2 flex gap-2\">\n                  <uip-input\n                    id=\"footer-email\"\n                    .value=${this.megaEmail}\n                    @input=${(e: Event) => {\n                      this.megaEmail = (e.target as UipInput).value\n                    }}\n                    type=\"email\"\n                    placeholder=\"you@company.com\"\n                    autocomplete=\"email\"\n                    class=\"max-w-64\"\n                  ></uip-input>\n                  <uip-button type=\"submit\">\n                    Subscribe ${icon(ArrowRight, 'arrow-right', 'ml-1.5 size-3.5')}\n                  </uip-button>\n                </div>\n                <p class=\"text-muted-foreground mt-2 min-h-5 text-xs\">\n                  ${this.megaSubmitted\n                    ? html`<span class=\"text-success inline-flex items-center gap-1.5\">\n                        ${icon(Check, 'check', 'size-3')} Check your inbox to confirm.\n                      </span>`\n                    : html`<span>One email a month. Unsubscribe in one click.</span>`}\n                </p>\n              </form>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5\">\n              ${megaSections.map(\n                (section) => html`<div>\n                  <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">${section.heading}</p>\n                  <ul class=\"mt-3 space-y-2\">\n                    ${section.links.map(\n                      (link) => html`<li>\n                        <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                          ${link}\n                        </a>\n                      </li>`,\n                    )}\n                  </ul>\n                </div>`,\n              )}\n            </div>\n          </div>\n\n          <div\n            data-uipkge=\"\"\n            data-slot=\"separator\"\n            data-orientation=\"horizontal\"\n            role=\"none\"\n            class=\"bg-border shrink-0 h-px w-full my-10\"\n          ></div>\n\n          <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n            <p class=\"text-muted-foreground text-xs\">© 2026 Northwind Data, Inc. All rights reserved.</p>\n            <uip-badge variant=\"outline\" class=\"w-fit\">SOC 2 Type II</uip-badge>\n            <div class=\"flex items-center gap-1 sm:ml-auto\">\n              <uip-button variant=\"ghost\" size=\"icon-sm\" class=\"size-8\" aria-label=\"GitHub\">\n                ${githubSvg('size-4')}\n              </uip-button>\n              <uip-button variant=\"ghost\" size=\"icon-sm\" class=\"size-8\" aria-label=\"LinkedIn\">\n                ${linkedinSvg('size-4')}\n              </uip-button>\n              <uip-button variant=\"ghost\" size=\"icon-sm\" class=\"size-8\" aria-label=\"YouTube\">\n                ${youtubeSvg('size-4')}\n              </uip-button>\n            </div>\n          </div>\n        </div>\n      </footer>\n    `\n  }\n\n  private renderMinimalRow() {\n    return html`\n      <footer data-slot=\"footer-minimal-row\" class=\"border-border bg-background border-t\">\n        <div class=\"mx-auto flex max-w-6xl flex-col gap-4 px-6 py-6 sm:flex-row sm:items-center\">\n          <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight\">\n            ${icon(Layers, 'layers', 'text-primary size-4')} Northwind\n          </a>\n\n          <div\n            data-uipkge=\"\"\n            data-slot=\"separator\"\n            data-orientation=\"vertical\"\n            role=\"none\"\n            class=\"bg-border shrink-0 w-px hidden h-4 sm:block\"\n          ></div>\n\n          <nav class=\"flex flex-wrap items-center gap-x-5 gap-y-2\" aria-label=\"Footer\">\n            ${minimalLinks.map(\n              (link) => html`<a\n                href=${link.href}\n                class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                ${link.label}\n              </a>`,\n            )}\n          </nav>\n\n          <div class=\"flex items-center gap-1 sm:ml-auto\">\n            <uip-button variant=\"ghost\" size=\"icon-sm\" class=\"size-8\" aria-label=\"GitHub\">\n              ${githubSvg('size-4')}\n            </uip-button>\n            <uip-button variant=\"ghost\" size=\"icon-sm\" class=\"size-8\" aria-label=\"LinkedIn\">\n              ${linkedinSvg('size-4')}\n            </uip-button>\n            <span class=\"text-muted-foreground ml-2 text-xs\">© 2026 Northwind</span>\n          </div>\n        </div>\n      </footer>\n    `\n  }\n\n  private renderSitemapDense() {\n    return html`\n      <footer data-slot=\"footer-sitemap-dense\" class=\"border-border bg-background border-t\">\n        <div class=\"mx-auto max-w-6xl px-6 py-12\">\n          <div class=\"grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-6\">\n            ${sitemapSections.map(\n              (section) => html`<div>\n                <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">${section.heading}</p>\n                <ul class=\"mt-3 space-y-1.5\">\n                  ${section.links.map(\n                    (link) => html`<li>\n                      <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                        ${link}\n                      </a>\n                    </li>`,\n                  )}\n                </ul>\n              </div>`,\n            )}\n          </div>\n\n          <div\n            data-uipkge=\"\"\n            data-slot=\"separator\"\n            data-orientation=\"horizontal\"\n            role=\"none\"\n            class=\"bg-border shrink-0 h-px w-full my-10\"\n          ></div>\n\n          <div class=\"flex flex-col gap-6 lg:flex-row lg:items-center\">\n            <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight\">\n              ${icon(Layers, 'layers', 'text-primary size-4')} Northwind\n            </a>\n\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <uip-select\n                class=\"h-8 w-40 text-xs\"\n                aria-label=\"Data region\"\n                .value=${this.region}\n                @change=${(e: Event) => {\n                  this.region = (e.target as UipSelect).value\n                }}\n              >\n                <option value=\"eu\">EU (Frankfurt)</option>\n                <option value=\"us\">US (Virginia)</option>\n                <option value=\"au\">AU (Sydney)</option>\n              </uip-select>\n\n              <uip-select\n                class=\"h-8 w-28 text-xs\"\n                aria-label=\"Currency\"\n                .value=${this.currency}\n                @change=${(e: Event) => {\n                  this.currency = (e.target as UipSelect).value\n                }}\n              >\n                <option value=\"eur\">EUR €</option>\n                <option value=\"usd\">USD $</option>\n                <option value=\"gbp\">GBP £</option>\n              </uip-select>\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-3 lg:ml-auto\">\n              <a href=\"#status\" class=\"hover:bg-muted flex items-center gap-2 rounded-md px-2 py-1 transition-colors\">\n                <span class=\"bg-success size-2 rounded-full\" aria-hidden=\"true\"></span>\n                <span class=\"text-muted-foreground text-xs\">All systems operational</span>\n              </a>\n              <uip-badge variant=\"outline\">SOC 2</uip-badge>\n              <uip-badge variant=\"outline\">GDPR</uip-badge>\n              <uip-button variant=\"ghost\" size=\"icon-sm\" class=\"size-8\" aria-label=\"GitHub\">\n                ${githubSvg('size-4')}\n              </uip-button>\n              <uip-button variant=\"ghost\" size=\"icon-sm\" class=\"size-8\" aria-label=\"LinkedIn\">\n                ${linkedinSvg('size-4')}\n              </uip-button>\n            </div>\n          </div>\n\n          <p class=\"text-muted-foreground mt-6 text-xs\">© 2026 Northwind Data, Inc. All rights reserved.</p>\n        </div>\n      </footer>\n    `\n  }\n\n  render() {\n    switch (this.variant) {\n      case 'brand-statement':\n        return this.renderBrandStatement()\n      case 'developer-dense-grid':\n        return this.renderDeveloperDenseGrid()\n      case 'mega-newsletter':\n        return this.renderMegaNewsletter()\n      case 'minimal-row':\n        return this.renderMinimalRow()\n      case 'sitemap-dense':\n        return this.renderSitemapDense()\n      case 'footer-01':\n      default:\n        return this.renderFooter01()\n    }\n  }\n}\n\ncustomElements.get('uip-footer') || customElements.define('uip-footer', UipFooter)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-footer': UipFooter\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/footer/footer.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/input.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/select.json"
  ]
}