{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cookie-consent-bar",
  "title": "Cookie Consent — Bar",
  "type": "registry:block",
  "description": "Bottom consent bar offering accept, reject, and manage as equally weighted actions, with a one-line statement of what is actually stored.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "cookie-consent",
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/cookie-consent-bar/cookie-consent-bar.ts",
      "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { Cookie } from 'lucide'\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'\n\n/**\n * <uip-cookie-consent-bar> — the registry CookieConsentBar block as a web component.\n *\n * Class strings are React's CookieConsentBar verbatim. Visibility reads\n * `storage-key` from localStorage in `connectedCallback` (browser-only, like\n * React's useEffect) and persists the choice there. `force-visible` is a\n * demo affordance that skips the storage check so the bar always renders;\n * `reset()` clears the stored choice and shows the bar again.\n */\nexport class UipCookieConsentBar 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    storageKey: { attribute: 'storage-key' },\n    forceVisible: { type: Boolean, attribute: 'force-visible' },\n    visible: { state: true },\n  }\n\n  storageKey = 'uipkge:consent'\n  forceVisible = false\n  private visible = false\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', 'cookie-consent-bar')\n    if (this.forceVisible) {\n      this.visible = true\n      return\n    }\n    try {\n      this.visible = !window.localStorage.getItem(this.storageKey)\n    } catch {\n      this.visible = true\n    }\n  }\n\n  /** Clears the stored choice and shows the bar again (demo affordance). */\n  reset() {\n    try {\n      window.localStorage.removeItem(this.storageKey)\n    } catch {\n      // Blocked storage: the choice holds for this page view only.\n    }\n    this.visible = true\n  }\n\n  private decide(choice: 'accepted' | 'rejected') {\n    this.visible = false\n    try {\n      window.localStorage.setItem(this.storageKey, choice)\n    } catch {\n      // Blocked storage: the choice holds for this page view only.\n    }\n  }\n\n  render() {\n    if (!this.visible) return nothing\n    return html`\n      <div\n        data-slot=\"cookie-consent-bar\"\n        class=\"border-border bg-card/95 fixed inset-x-0 bottom-0 z-50 border-t backdrop-blur\"\n        role=\"region\"\n        aria-label=\"Cookie consent\"\n      >\n        <div class=\"mx-auto flex max-w-6xl flex-col gap-4 px-6 py-4 lg:flex-row lg:items-center lg:gap-8\">\n          <div class=\"flex min-w-0 items-start gap-3\">\n            ${icon(Cookie, 'cookie', 'text-muted-foreground mt-0.5 size-4 shrink-0')}\n            <div class=\"min-w-0\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <p class=\"text-sm font-medium\">We store two things</p>\n                <uip-badge variant=\"outline\">No ad tracking</uip-badge>\n              </div>\n              <p class=\"text-muted-foreground mt-1 text-sm leading-relaxed\">\n                A session cookie so you stay signed in, and an analytics cookie recording which pages get read.\n                Rejecting keeps the first and drops the second.\n              </p>\n            </div>\n          </div>\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-10 lg:block\"\n          ></div>\n\n          <div class=\"flex shrink-0 flex-wrap items-center gap-2\">\n            <uip-button\n              variant=\"outline\"\n              @click=${() => this.decide('rejected')}\n            >\n              Reject analytics\n            </uip-button>\n            <uip-button\n              @click=${() => this.decide('accepted')}\n            >\n              Accept\n            </uip-button>\n            <uip-button variant=\"ghost\" size=\"sm\">Manage</uip-button>\n          </div>\n        </div>\n      </div>\n    `\n  }\n}\n\ncustomElements.get('uip-cookie-consent-bar') || customElements.define('uip-cookie-consent-bar', UipCookieConsentBar)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-cookie-consent-bar': UipCookieConsentBar\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/cookie-consent-bar/cookie-consent-bar.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}