{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "logo-cloud-grayscale",
  "title": "Logo Cloud — Grayscale Hover",
  "type": "registry:block",
  "description": "Customer logo wall rendered in muted monochrome that resolves to full contrast on hover, with a headline count and a segment line beneath.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "logos",
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/logo-cloud-grayscale/logo-cloud-grayscale.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\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/separator/separator'\n\nconst customers = [\n  'Northwind',\n  'Halden',\n  'Verity',\n  'Calder',\n  'Ridgeway',\n  'Ashford',\n  'Brightmoor',\n  'Kesteven',\n  'Marlowe',\n  'Thornbury',\n  'Wexley',\n  'Alderton',\n]\n\n/**\n * <uip-logo-cloud-grayscale> — the registry LogoCloudGrayscale block as a web component.\n *\n * Class strings are React's LogoCloudGrayscale verbatim. The section is\n * static (React holds no state).\n */\nexport class UipLogoCloudGrayscale 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  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'logo-cloud-grayscale')\n  }\n\n  render() {\n    return html`\n      <section data-slot=\"logo-cloud-grayscale\" class=\"bg-background\">\n        <div class=\"mx-auto max-w-6xl px-6 py-16\">\n          <div class=\"text-center\">\n            <uip-badge variant=\"secondary\">Customers</uip-badge>\n            <p class=\"mt-4 text-lg font-medium\">Running the close at 240 companies</p>\n            <p class=\"text-muted-foreground mt-1.5 text-sm\">\n              Freight, healthcare, retail, and manufacturing · median 1,100 staff\n            </p>\n          </div>\n\n          <ul class=\"mt-10 grid grid-cols-2 gap-x-8 gap-y-6 sm:grid-cols-3 lg:grid-cols-6\">\n            ${customers.map(\n              (customer) => html`\n                <li class=\"flex items-center justify-center\">\n                  <span\n                    class=\"text-muted-foreground/60 hover:text-foreground cursor-default text-sm font-semibold tracking-[0.18em] uppercase transition-colors\"\n                  >\n                    ${customer}\n                  </span>\n                </li>\n              `,\n            )}\n          </ul>\n\n          <uip-separator class=\"[&::part(base)]:my-10\"></uip-separator>\n\n          <div class=\"flex flex-wrap items-center justify-center gap-4 text-center\">\n            <p class=\"text-muted-foreground text-sm\">Six of the ten largest UK freight forwarders.</p>\n            <uip-button variant=\"link\" class=\"h-auto p-0 text-sm\">Read their stories</uip-button>\n          </div>\n        </div>\n      </section>\n    `\n  }\n}\n\ncustomElements.get('uip-logo-cloud-grayscale') ||\n  customElements.define('uip-logo-cloud-grayscale', UipLogoCloudGrayscale)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-logo-cloud-grayscale': UipLogoCloudGrayscale\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/logo-cloud-grayscale/logo-cloud-grayscale.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/separator.json"
  ]
}