component AnnouncementBar {
  outputs {
    dismiss(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
  }

  props {
badge: string = ""
    badgeIcon: string = ""
    message: string = "Announcement"
    description: string = ""
    icon: string = "icon-[lucide--megaphone]"
    actionLabel: string = ""
    actionHref: string = ""
    actionIcon: string = ""
    dismissible: boolean = false
    dismissLabel: string = "Dismiss announcement"
    sticky: boolean = false
    compact: boolean = false
    flush: boolean = false
    mobileCompact: boolean = false
    mobileMessageLines: number = 2
    hideBadgeOnMobile: boolean = false
    hideDescriptionOnMobile: boolean = false
    mobileActionSize: string = "default"
    gutter: string = "md"
    contentGutter: string = "md"
    flushMobile: boolean = false
    size: string = "default"
    width: string = "default"
    color: string = "primary"
    variant: string = "soft"
    role: string = "status"
    live: string = "polite"
    class: string = ""
  }

  state dismissed: boolean = false

  view {
    <aside
      {...attrs}
      data-ui-component="AnnouncementBar"
      data-size='{size}'
      data-width='{width}'
      data-color='{color}'
      data-variant='{variant}'
      data-compact='{compact}'
      data-flush='{flush ? "true" : "false"}' data-mobile-compact='{mobileCompact ? "true" : "false"}' data-mobile-message-lines='{mobileMessageLines}' data-hide-badge-mobile='{hideBadgeOnMobile ? "true" : "false"}' data-hide-description-mobile='{hideDescriptionOnMobile ? "true" : "false"}' data-mobile-action-size='{mobileActionSize}' data-gutter='{gutter}' data-content-gutter='{contentGutter}' data-flush-mobile='{flushMobile ? "true" : "false"}'
      data-sticky='{sticky}'
      data-show='{!dismissed}'
      aria-hidden='{dismissed ? "true" : "false"}'
      role='{role}'
      aria-live='{live}'
      class='wrn-announcement {class}'
    >
      <div class="wrn-announcement__surface">
        <span
          class="wrn-announcement__accent"
          aria-hidden="true"
        ></span>

        <span
          class="wrn-announcement__glow wrn-announcement__glow--one"
          aria-hidden="true"
        ></span>

        <span
          class="wrn-announcement__glow wrn-announcement__glow--two"
          aria-hidden="true"
        ></span>

        <div class="wrn-announcement__inner">
          <div class="wrn-announcement__content">
            {#if icon}
              <span class="wrn-announcement__icon">
                <span
                  class='{icon}'
                  aria-hidden="true"
                ></span>
              </span>
            {/if}

            <div class="wrn-announcement__copy">
              <div class="wrn-announcement__headline">
                {#if badge}
                  <span class="wrn-announcement__badge">
                    {#if badgeIcon}
                      <span
                        class='{badgeIcon}'
                        aria-hidden="true"
                      ></span>
                    {/if}

                    <span>{badge}</span>
                  </span>
                {/if}

                <p class="wrn-announcement__message">
                  {message}
                </p>
              </div>

              {#if description && !compact}
                <p class="wrn-announcement__description">
                  {description}
                </p>
              {/if}
            </div>
          </div>

          {#if actionLabel || dismissible}
            <div class="wrn-announcement__actions">
              {#if actionLabel}
                <a
                  href='{actionHref || "#"}'
                  class="wrn-announcement__action"
                >
                  <span>{actionLabel}</span>

                  {#if actionIcon}
                    <span
                      class='{actionIcon}'
                      aria-hidden="true"
                    ></span>
                  {:else}
                    <span
                      class="icon-[lucide--arrow-right]"
                      aria-hidden="true"
                    ></span>
                  {/if}
                </a>
              {/if}

              {#if dismissible}
                <button
                  type="button"
                  aria-label='{dismissLabel}'
                  title='{dismissLabel}'
                  class="wrn-announcement__dismiss"
                  @click='dismissed = true; output.dismiss({ message: message })'
                >
                  <span
                    class="icon-[lucide--x]"
                    aria-hidden="true"
                  ></span>
                </button>
              {/if}
            </div>
          {/if}
        </div>
      </div>
    </aside>
  }

  style {
    .wrn-announcement {
      --announcement-accent: var(--wrn-color-primary);
      --announcement-contrast: var(--wrn-color-primary-contrast, #ffffff);
      --announcement-soft: var(--wrn-color-primary-soft);
      --announcement-muted: var(--wrn-color-primary-muted);

      position: relative;
      z-index: 40;
      display: block;
      width: 100%;
      max-width: 100%;
      margin-inline: 0;
      color: var(--wrn-color-text);
    }

    .wrn-announcement__surface {
      width: min(calc(100% - 2rem), 72rem);
      margin-inline: auto;
    }

    .wrn-announcement[data-flush="true"] .wrn-announcement__surface { border-radius: 0; box-shadow: none; }

    .wrn-announcement[data-width="wide"] .wrn-announcement__surface {
      width: min(calc(100% - 2rem), 90rem);
    }

    .wrn-announcement[data-width="full"] .wrn-announcement__surface {
      width: 100%;
      max-width: none;
      margin-inline: 0;
      border-inline: 0;
      border-radius: 0;
    }

    .wrn-announcement[data-sticky="true"] {
      position: sticky;
      top: 0;
    }

    .wrn-announcement[data-color="secondary"] {
      --announcement-accent: var(--wrn-color-secondary);
      --announcement-contrast: var(--wrn-color-secondary-contrast, #ffffff);
      --announcement-soft: var(--wrn-color-secondary-soft);
      --announcement-muted: var(--wrn-color-secondary-muted);
    }

    .wrn-announcement[data-color="info"] {
      --announcement-accent: var(--wrn-color-info);
      --announcement-contrast: var(--wrn-color-info-contrast, #ffffff);
      --announcement-soft: var(--wrn-color-info-soft);
      --announcement-muted: var(--wrn-color-info-muted);
    }

    .wrn-announcement[data-color="success"] {
      --announcement-accent: var(--wrn-color-success);
      --announcement-contrast: var(--wrn-color-success-contrast, #ffffff);
      --announcement-soft: var(--wrn-color-success-soft);
      --announcement-muted: var(--wrn-color-success-muted);
    }

    .wrn-announcement[data-color="warning"] {
      --announcement-accent: var(--wrn-color-warning);
      --announcement-contrast: var(--wrn-color-warning-contrast, #111827);
      --announcement-soft: var(--wrn-color-warning-soft);
      --announcement-muted: var(--wrn-color-warning-muted);
    }

    .wrn-announcement[data-color="danger"] {
      --announcement-accent: var(--wrn-color-danger);
      --announcement-contrast: var(--wrn-color-danger-contrast, #ffffff);
      --announcement-soft: var(--wrn-color-danger-soft);
      --announcement-muted: var(--wrn-color-danger-muted);
    }

    .wrn-announcement__surface {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: var(--wrn-color-surface-raised);
      border: 1px solid var(--wrn-color-border);
      border-radius: 1.25rem;
      box-shadow:
        0 1px 2px rgb(0 0 0 / 0.04),
        0 12px 32px rgb(0 0 0 / 0.08);
    }

    .wrn-announcement[data-variant="soft"] .wrn-announcement__surface {
      background:
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--announcement-soft) 86%, var(--wrn-color-surface-raised)),
          var(--wrn-color-surface-raised)
        );
      border-color: color-mix(in srgb, var(--announcement-accent) 28%, var(--wrn-color-border));
    }

    .wrn-announcement[data-variant="outline"] .wrn-announcement__surface {
      background: transparent;
      border-color: color-mix(in srgb, var(--announcement-accent) 46%, var(--wrn-color-border));
      box-shadow: none;
    }

    .wrn-announcement[data-variant="minimal"] .wrn-announcement__surface {
      background: transparent;
      border-color: transparent;
      border-radius: 0;
      box-shadow: none;
    }

    .wrn-announcement[data-variant="solid"] {
      color: var(--announcement-contrast);
    }

    .wrn-announcement[data-variant="solid"] .wrn-announcement__surface {
      background:
        radial-gradient(
          circle at 8% 15%,
          color-mix(in srgb, var(--announcement-contrast) 14%, transparent),
          transparent 30%
        ),
        linear-gradient(
          135deg,
          color-mix(in srgb, var(--announcement-accent) 96%, white 4%),
          color-mix(in srgb, var(--announcement-accent) 76%, black 24%)
        );
      border-color: color-mix(in srgb, var(--announcement-contrast) 28%, transparent);
      box-shadow:
        0 1px 0 color-mix(in srgb, var(--announcement-contrast) 20%, transparent) inset,
        0 18px 46px color-mix(in srgb, var(--announcement-accent) 30%, transparent);
    }

    .wrn-announcement__accent {
      position: absolute;
      z-index: -1;
      inset-block: 0;
      inset-inline-start: 0;
      width: 0.25rem;
      background: var(--announcement-accent);
    }

    .wrn-announcement[data-variant="solid"] .wrn-announcement__accent,
    .wrn-announcement[data-variant="minimal"] .wrn-announcement__accent {
      display: none;
    }

    .wrn-announcement__glow {
      position: absolute;
      z-index: -1;
      display: block;
      border-radius: 999px;
      pointer-events: none;
      filter: blur(3rem);
      opacity: 0.28;
    }

    .wrn-announcement__glow--one {
      width: 16rem;
      height: 16rem;
      inset-block-start: -10rem;
      inset-inline-end: -4rem;
      background: var(--announcement-muted);
    }

    .wrn-announcement__glow--two {
      width: 10rem;
      height: 10rem;
      inset-block-end: -7rem;
      inset-inline-start: 28%;
      background: var(--announcement-soft);
      opacity: 0.18;
    }

    .wrn-announcement[data-variant="solid"] .wrn-announcement__glow {
      background: var(--announcement-contrast);
      opacity: 0.1;
    }

    .wrn-announcement[data-variant="minimal"] .wrn-announcement__glow {
      display: none;
    }

    .wrn-announcement__inner {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: 100%;
      padding: 1rem 1.125rem;
    }

    .wrn-announcement[data-size="sm"] .wrn-announcement__inner,
    .wrn-announcement[data-compact="true"] .wrn-announcement__inner {
      padding-block: 0.75rem;
    }

    .wrn-announcement[data-size="lg"] .wrn-announcement__inner {
      padding: 1.25rem 1.5rem;
    }

    .wrn-announcement__content {
      display: flex;
      align-items: flex-start;
      gap: 0.875rem;
      min-width: 0;
    }

    .wrn-announcement__icon {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 2.75rem;
      height: 2.75rem;
      color: var(--announcement-accent);
      background: var(--announcement-soft);
      border: 1px solid color-mix(in srgb, var(--announcement-accent) 20%, transparent);
      border-radius: 0.875rem;
      box-shadow: 0 8px 20px color-mix(in srgb, var(--announcement-accent) 12%, transparent);
    }

    .wrn-announcement__icon > span {
      width: 1.2rem;
      height: 1.2rem;
    }

    .wrn-announcement[data-size="sm"] .wrn-announcement__icon,
    .wrn-announcement[data-compact="true"] .wrn-announcement__icon {
      width: 2.35rem;
      height: 2.35rem;
      border-radius: 0.75rem;
    }

    .wrn-announcement[data-size="lg"] .wrn-announcement__icon {
      width: 3.15rem;
      height: 3.15rem;
    }

    .wrn-announcement[data-variant="solid"] .wrn-announcement__icon {
      color: var(--announcement-contrast);
      background: color-mix(in srgb, var(--announcement-contrast) 12%, transparent);
      border-color: color-mix(in srgb, var(--announcement-contrast) 22%, transparent);
      box-shadow: none;
    }

    .wrn-announcement__copy {
      flex: 1 1 auto;
      min-width: 0;
      padding-top: 0.1rem;
    }

    .wrn-announcement__headline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55rem 0.8rem;
    }

    .wrn-announcement__badge {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 0.35rem;
      min-height: 1.6rem;
      padding: 0.25rem 0.65rem;
      color: var(--announcement-accent);
      font-size: 0.6875rem;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      background: var(--announcement-soft);
      border: 1px solid color-mix(in srgb, var(--announcement-accent) 22%, transparent);
      border-radius: 999px;
    }

    .wrn-announcement__badge > span:first-child:not(:last-child) {
      width: 0.8rem;
      height: 0.8rem;
    }

    .wrn-announcement[data-variant="solid"] .wrn-announcement__badge {
      color: var(--announcement-contrast);
      background: color-mix(in srgb, var(--announcement-contrast) 13%, transparent);
      border-color: color-mix(in srgb, var(--announcement-contrast) 24%, transparent);
    }

    .wrn-announcement__message {
      margin: 0;
      color: var(--wrn-color-text);
      font-size: 0.9375rem;
      font-weight: 650;
      line-height: 1.5;
    }

    .wrn-announcement[data-size="sm"] .wrn-announcement__message,
    .wrn-announcement[data-compact="true"] .wrn-announcement__message {
      font-size: 0.875rem;
    }

    .wrn-announcement[data-size="lg"] .wrn-announcement__message {
      font-size: 1rem;
    }

    .wrn-announcement[data-variant="solid"] .wrn-announcement__message {
      color: var(--announcement-contrast);
    }

    .wrn-announcement__description {
      max-width: 52rem;
      margin: 0.28rem 0 0;
      color: var(--wrn-color-text-muted);
      font-size: 0.8125rem;
      line-height: 1.55;
    }

    .wrn-announcement[data-size="lg"] .wrn-announcement__description {
      font-size: 0.875rem;
    }

    .wrn-announcement[data-variant="solid"] .wrn-announcement__description {
      color: color-mix(in srgb, var(--announcement-contrast) 76%, transparent);
    }

    .wrn-announcement__actions {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 0.55rem;
      padding-inline-start: 3.625rem;
    }

    .wrn-announcement__action,
    .wrn-announcement__dismiss {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 2.5rem;
      color: var(--wrn-color-text);
      font-size: 0.8125rem;
      font-weight: 650;
      text-decoration: none;
      background: var(--wrn-color-surface-raised);
      border: 1px solid var(--wrn-color-border);
      border-radius: 0.75rem;
      box-shadow: 0 5px 14px rgb(0 0 0 / 0.06);
      transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease;
    }

    .wrn-announcement__action {
      gap: 0.45rem;
      padding: 0.55rem 0.9rem;
    }

    .wrn-announcement__action > span:last-child {
      width: 0.95rem;
      height: 0.95rem;
      transition: transform 160ms ease;
    }

    .wrn-announcement__dismiss {
      width: 2.5rem;
      padding: 0;
      cursor: pointer;
    }

    .wrn-announcement__dismiss > span {
      width: 1rem;
      height: 1rem;
    }

    .wrn-announcement__action:hover,
    .wrn-announcement__dismiss:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--announcement-accent) 42%, var(--wrn-color-border));
      box-shadow: 0 8px 20px rgb(0 0 0 / 0.1);
    }

    .wrn-announcement__action:hover > span:last-child {
      transform: translateX(0.16rem);
    }

    .wrn-announcement__action:focus-visible,
    .wrn-announcement__dismiss:focus-visible {
      outline: 2px solid var(--wrn-color-focus, var(--announcement-accent));
      outline-offset: 3px;
    }

    .wrn-announcement[data-variant="solid"] .wrn-announcement__action {
      color: var(--announcement-accent);
      background: var(--announcement-contrast);
      border-color: transparent;
      box-shadow: 0 8px 22px color-mix(in srgb, black 18%, transparent);
    }

    .wrn-announcement[data-variant="solid"] .wrn-announcement__dismiss {
      color: var(--announcement-contrast);
      background: color-mix(in srgb, var(--announcement-contrast) 13%, transparent);
      border-color: color-mix(in srgb, var(--announcement-contrast) 24%, transparent);
      box-shadow: none;
    }

    .wrn-announcement[data-variant="solid"] .wrn-announcement__action:hover {
      background: color-mix(in srgb, var(--announcement-contrast) 92%, transparent);
    }

    .wrn-announcement[data-variant="solid"] .wrn-announcement__dismiss:hover {
      background: color-mix(in srgb, var(--announcement-contrast) 20%, transparent);
      border-color: color-mix(in srgb, var(--announcement-contrast) 34%, transparent);
    }

    @media (min-width: 768px) {
      .wrn-announcement__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
      }

      .wrn-announcement__content {
        flex: 1 1 auto;
      }

      .wrn-announcement__actions {
        justify-content: flex-end;
        padding-inline-start: 0;
      }
    }

    @media (max-width: 639px) {
      .wrn-announcement[data-mobile-compact="true"] .wrn-announcement__inner,
      .wrn-announcement[data-compact="true"] .wrn-announcement__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; }
      .wrn-announcement[data-hide-badge-mobile="true"] .wrn-announcement__badge,
      .wrn-announcement[data-mobile-compact="true"] .wrn-announcement__badge { display: none; }
      .wrn-announcement[data-hide-description-mobile="true"] .wrn-announcement__description,
      .wrn-announcement[data-mobile-compact="true"] .wrn-announcement__description { display: none; }
      .wrn-announcement[data-mobile-message-lines="2"] .wrn-announcement__message { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
      .wrn-announcement[data-mobile-action-size="sm"] .wrn-announcement__action { min-height: 2.25rem; padding-inline: 0.7rem; }
      .wrn-announcement[data-flush-mobile="false"] .wrn-announcement__inner { padding-inline: 1rem; }
      .wrn-announcement__surface,
      .wrn-announcement[data-width="wide"] .wrn-announcement__surface {
        width: calc(100% - 1rem);
      }

      .wrn-announcement[data-width="full"] .wrn-announcement__surface {
        width: 100%;
        border-radius: 0;
      }

      .wrn-announcement__surface {
        border-radius: 1rem;
      }

      .wrn-announcement__inner {
        padding-inline: 0.9rem;
      }

      .wrn-announcement__actions {
        width: 100%;
        padding-inline-start: 3.625rem;
      }

      .wrn-announcement__action {
        flex: 1 1 auto;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .wrn-announcement__action,
      .wrn-announcement__dismiss,
      .wrn-announcement__action > span:last-child {
        transition: none;
      }

      .wrn-announcement__action:hover,
      .wrn-announcement__dismiss:hover,
      .wrn-announcement__action:hover > span:last-child {
        transform: none;
      }
    }
  }
}