name: "Channel Header"
short_description: A channel banner with avatar, name, subscriber stats, and a subscribe toggle.
long_visual_description: >
  A banner image with the channel avatar overlapping its lower edge, the channel name and
  subscriber/video stats beside it, and a subscribe button that toggles to a subscribed
  outline state.

use_cases:
  - Channel or creator page header.
  - Podcast show header with subscribe.
  - Profile banner for a media account.
  - Series or playlist owner header.
  - Brand channel landing header.

recommended_for:
  - The header of a video/media channel with a subscribe action.
avoid_for:
  - A person profile card (use card-profile).

markets:
  - Global

example_usage: >
  Precompute initials for the avatar fallback; reflect the subscribed state on the button.
  Listen for channel:subscribe to persist it.

props:
  name: The channel name.
  initials: 1-2 char avatar fallback, precomputed.
  avatar: Optional channel avatar.
  banner: The banner image.
  subscribers: The subscriber count label.
  videos: Optional video count.
  subscribed: Whether the viewer is subscribed.

example_prompts:
  - "Add a channel header with a banner, avatar, and subscribe button."
  - "Add a creator page header showing subscriber count."

lifecycle: experimental
content_model: A banner, avatar, name, stats, and a subscribe toggle.

theming:
  tokens_used:
    - --color-surface
    - --color-surface-raised
    - --color-on-surface
    - --color-on-surface-muted
    - --color-primary
    - --color-primary-contrast
    - --color-border
    - --radius-card
    - --radius-pill
    - --shadow-card
    - --font-heading
    - --space-card
    - --duration-token

editorial_guidance: >
  Keep stats in a consistent format; the subscribe button should clearly change state when toggled.

categorization:
  category: Video
  subcategory: Library
  atomic_type: organism
  usage_type: [media, nav]
  maturity: ai-generated
  wcag:
    level: AA
    notes: The avatar carries the channel name; the subscribe button uses aria-pressed and swaps its visible label with state.
  keyboard_support: The subscribe button is focusable and toggles on Enter/Space.
  seo_score: 45
  text_direction: both