{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "header-announcement-stack",
  "title": "Header — Announcement Stack",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/header-announcement-stack/header-announcement-stack.component.ts",
      "content": "// Two-tier site header: a dismissible announcement strip above a sticky navbar,\n// where dismissing the strip collapses it and leaves the navbar flush against the\n// viewport top. Port of the Vue/React block 1:1 — same links, same copy, same\n// session-scoped dismissal (rendered visible first so there is no flash of a strip\n// that then vanishes).\nimport { ChangeDetectionStrategy, Component, Input, OnInit, signal } from '@angular/core'\nimport { ArrowRight, Layers, LucideAngularModule, Menu, X } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n  UiSheetCloseComponent,\n  UiSheetComponent,\n  UiSheetContentComponent,\n  UiSheetHeaderComponent,\n  UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\n\nexport interface AnnouncementStackLink {\n  label: string\n  href: string\n}\n\nconst STORAGE_KEY = 'uipkge:announcement-dismissed'\n\nconst links: AnnouncementStackLink[] = [\n  { label: 'Platform', href: '#platform' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Customers', href: '#customers' },\n  { label: 'Docs', href: '#docs' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-header-announcement-stack, [ui-header-announcement-stack]',\n  standalone: true,\n  // The block renders its own root <div>: keep this wrapper out of the layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiSeparatorComponent,\n    UiSheetCloseComponent,\n    UiSheetComponent,\n    UiSheetContentComponent,\n    UiSheetHeaderComponent,\n    UiSheetTitleComponent,\n  ],\n  template: `\n    <div data-slot=\"header-announcement-stack\" [class]=\"rootClass\">\n      @if (!dismissed()) {\n        <div class=\"border-border bg-muted/60 border-b backdrop-blur\">\n          <div class=\"mx-auto flex h-10 max-w-6xl items-center gap-3 px-6 text-sm\">\n            <span ui-badge variant=\"secondary\" class=\"shrink-0\">New</span>\n            <p class=\"min-w-0 truncate\">\n              Row-level scoping now evaluates against SCIM groups.\n              <a href=\"#changelog\" class=\"hover:text-foreground underline underline-offset-4\">Read the changelog</a>\n            </p>\n            <lucide-icon [img]=\"ArrowRight\" class=\"text-muted-foreground hidden size-3.5 shrink-0 sm:block\" />\n            <button\n              ui-button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"ml-auto size-7 shrink-0\"\n              aria-label=\"Dismiss announcement\"\n              (click)=\"dismiss()\"\n            >\n              <lucide-icon [img]=\"X\" class=\"size-3.5\" />\n            </button>\n          </div>\n        </div>\n      }\n\n      <header class=\"border-border bg-background/90 border-b backdrop-blur\">\n        <div class=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n          <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n            <lucide-icon [img]=\"Layers\" class=\"text-primary size-5\" />\n            Northwind\n          </a>\n\n          <nav class=\"hidden items-center gap-1 md:flex\" aria-label=\"Primary\">\n            @for (link of navLinks; track link.href) {\n              <a\n                [href]=\"link.href\"\n                class=\"text-muted-foreground hover:text-foreground hover:bg-muted 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              >\n                {{ link.label }}\n              </a>\n            }\n          </nav>\n\n          <div class=\"ml-auto hidden items-center gap-2 md:flex\">\n            <button ui-button variant=\"ghost\" size=\"sm\">Sign in</button>\n            <button ui-button size=\"sm\">Book a demo</button>\n          </div>\n\n          <div ui-sheet [open]=\"mobileOpen()\" (openChange)=\"mobileOpen.set($event)\">\n            <button\n              ui-button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"ml-auto md:hidden\"\n              aria-label=\"Open navigation menu\"\n              (click)=\"mobileOpen.set(true)\"\n            >\n              <lucide-icon [img]=\"Menu\" class=\"size-5\" />\n            </button>\n            <div ui-sheet-content side=\"right\" class=\"w-72\">\n              <div ui-sheet-header>\n                <h2 ui-sheet-title>Menu</h2>\n              </div>\n              <nav class=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n                @for (link of navLinks; track link.href) {\n                  <a\n                    [href]=\"link.href\"\n                    class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                    (click)=\"mobileOpen.set(false)\"\n                  >\n                    {{ link.label }}\n                  </a>\n                }\n              </nav>\n              <div ui-separator class=\"my-5\"></div>\n              <div class=\"grid gap-2\">\n                <button ui-button variant=\"outline\">Sign in</button>\n                <button ui-button>Book a demo</button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </header>\n    </div>\n  `,\n})\nexport class UiHeaderAnnouncementStackComponent implements OnInit {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Layers = Layers\n  protected readonly Menu = Menu\n  protected readonly X = X\n\n  protected readonly navLinks = links\n\n  @Input('class') className?: string\n\n  readonly dismissed = signal(false)\n  readonly mobileOpen = signal(false)\n\n  ngOnInit(): void {\n    try {\n      if (typeof window !== 'undefined' && typeof window.sessionStorage !== 'undefined') {\n        this.dismissed.set(window.sessionStorage.getItem(STORAGE_KEY) === '1')\n      }\n    } catch {\n      this.dismissed.set(false)\n    }\n  }\n\n  dismiss(): void {\n    this.dismissed.set(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  get rootClass(): string {\n    return cn('sticky top-0 z-40', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/header-announcement-stack/header-announcement-stack.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/header-announcement-stack/index.ts",
      "content": "export { UiHeaderAnnouncementStackComponent, type AnnouncementStackLink } from './header-announcement-stack.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/header-announcement-stack/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/separator.json",
    "https://uipkge.dev/r/angular/sheet.json"
  ],
  "description": "Two-tier site header: a dismissible announcement strip above a sticky navbar, where dismissing the strip collapses it and leaves the navbar flush against the viewport top.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}