component Drawer {
  outputs {
    open(payload: { placement: string; sourceEvent: Event })
    close(payload: { reason: string; placement: string; sourceEvent: Event })
    cancel(payload: { placement: string; sourceEvent: Event })
  }

  props {
open: boolean = false
    defaultOpen: boolean = false
    placement: string = "right"
    size: string = "md"
    color: string = "primary"
    variant: string = "default"
    title: string = "Drawer"
    description: string = ""
    icon: string = ""
    label: string = "Drawer"
    closeLabel: string = "Close drawer"
    showClose: boolean = true
    closeOnBackdrop: boolean = true
    closeOnEscape: boolean = true
    // Open/close animation length in ms. 0 disables the animation entirely.
    duration: number = 260
    overlay: boolean = true
    scrollable: boolean = true
    triggerLabel: string = ""
    triggerIcon: string = ""
    class: string = ""
  }

  state visible = defaultOpen

  functions {
    shared function isOpen() {
      return open || visible
    }

    client function showDrawer(sourceEvent) {
      visible = true
      output.open({
        placement: placement,
        sourceEvent: sourceEvent
      })
    }

    client function hideDrawer(reason, sourceEvent) {
      visible = false
      output.close({
        reason: reason,
        placement: placement,
        sourceEvent: sourceEvent
      })
    }

    client function cancelDrawer(sourceEvent) {
      output.cancel({
        placement: placement,
        sourceEvent: sourceEvent
      })
      hideDrawer("cancel", sourceEvent)
    }

    client function handleKeydown(sourceEvent) {
      if (closeOnEscape && sourceEvent.key === "Escape") {
        sourceEvent.preventDefault()
        cancelDrawer(sourceEvent)
      }
    }
  }

  view {
    <div
      {...attrs}
      data-ui-component="Drawer"
      data-open='{open || visible ? "true" : "false"}'
      data-placement='{placement}'
      data-size='{size}'
      data-color='{color}'
      data-variant='{variant}'
      data-overlay='{overlay ? "true" : "false"}'
      data-scrollable='{scrollable ? "true" : "false"}'
      class='wrn-drawer {class}'
      style='--drawer-duration: {duration}ms'
    >

      {#if triggerLabel}
        <button
          type="button"
          class="wrn-drawer__trigger"
          aria-haspopup="dialog"
          aria-expanded='{open || visible ? "true" : "false"}'
          @click='showDrawer(event)'
        >
          {#if triggerIcon}
            <span class='{triggerIcon}' aria-hidden="true"></span>
          {/if}
          <span>{triggerLabel}</span>
        </button>
      {/if}

      <span class="wrn-drawer__trigger-slot" @click='showDrawer(event)'>
        <slot name="trigger"></slot>
      </span>

      <div
        class="wrn-drawer__layer"
        role="presentation"
        @keydown='handleKeydown(event)'
      >
        {#if overlay}
          <button
            type="button"
            class="wrn-drawer__backdrop"
            aria-label='{closeLabel}'
            @click='if (closeOnBackdrop) { cancelDrawer(event) }'
          ></button>
        {/if}

        <section
          class="wrn-drawer__panel"
          role="dialog"
          aria-modal="true"
          aria-label='{label || title}'
          tabindex="-1"
        >
          <div class="wrn-drawer__handle" aria-hidden="true"></div>

          <header class="wrn-drawer__header">
            <div class="wrn-drawer__heading">
              {#if icon}
                <span class='wrn-drawer__icon {icon}' aria-hidden="true"></span>
              {/if}

              <div class="wrn-drawer__heading-copy">
                <slot name="header"></slot>
                {#if title}
                  <h2>{title}</h2>
                {/if}
                {#if description}
                  <p>{description}</p>
                {/if}
              </div>
            </div>

            {#if showClose}
              <button
                type="button"
                class="wrn-drawer__close"
                aria-label='{closeLabel}'
                @click='hideDrawer("close-button", event)'
              >
                <span class="icon-[lucide--x]" aria-hidden="true"></span>
              </button>
            {/if}
          </header>

          <div class="wrn-drawer__body">
            <slot></slot>
          </div>

          <footer class="wrn-drawer__footer">
            <slot name="footer"></slot>
          </footer>
        </section>
      </div>
    </div>
  }

  style {
    .wrn-drawer {
      --drawer-accent: var(--wrn-color-primary);
      --drawer-soft: var(--wrn-color-primary-soft);
      position: relative;
      display: inline-flex;
    }

    .wrn-drawer[data-color="secondary"] {
      --drawer-accent: var(--wrn-color-secondary);
      --drawer-soft: var(--wrn-color-secondary-soft);
    }

    .wrn-drawer[data-color="info"] {
      --drawer-accent: var(--wrn-color-info);
      --drawer-soft: var(--wrn-color-info-soft);
    }

    .wrn-drawer[data-color="success"] {
      --drawer-accent: var(--wrn-color-success);
      --drawer-soft: var(--wrn-color-success-soft);
    }

    .wrn-drawer[data-color="warning"] {
      --drawer-accent: var(--wrn-color-warning);
      --drawer-soft: var(--wrn-color-warning-soft);
    }

    .wrn-drawer[data-color="danger"] {
      --drawer-accent: var(--wrn-color-danger);
      --drawer-soft: var(--wrn-color-danger-soft);
    }

    .wrn-drawer__trigger,
    .wrn-drawer__trigger-slot {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
    }

    .wrn-drawer__trigger {
      appearance: none;
      min-height: 2.55rem;
      padding: 0.65rem 1rem;
      color: var(--wrn-color-primary-contrast);
      background: var(--drawer-accent);
      border: 0;
      border-radius: 0.8rem;
      font: inherit;
      font-size: 0.85rem;
      font-weight: 650;
      cursor: pointer;
    }

    /*
     * The layer stays in the layout and is revealed by [data-open]; it used to
     * be toggled with data-show, which sets display:none, and display cannot
     * be transitioned -- the drawer simply snapped in and out. visibility is
     * delayed by the duration on the way out so the panel can finish sliding
     * before the layer is taken out of the hit-testing tree.
     */
    .wrn-drawer__layer {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: flex;
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
      transition:
        opacity var(--drawer-duration, 260ms) ease,
        visibility 0s linear var(--drawer-duration, 260ms);
    }

    .wrn-drawer[data-open="true"] .wrn-drawer__layer {
      visibility: visible;
      opacity: 1;
      transition:
        opacity var(--drawer-duration, 260ms) ease,
        visibility 0s linear 0s;
    }

    .wrn-drawer__backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
      appearance: none;
      padding: 0;
      background: color-mix(in srgb, black 56%, transparent);
      border: 0;
      backdrop-filter: blur(7px);
      pointer-events: auto;
    }

    .wrn-drawer[data-overlay="false"] .wrn-drawer__backdrop {
      display: none;
    }

    .wrn-drawer__panel {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: min(28rem, calc(100vw - 1rem));
      max-height: 100%;
      margin-left: auto;
      color: var(--wrn-color-text);
      background:
        radial-gradient(
          circle at 100% 0%,
          color-mix(in srgb, var(--drawer-accent) 8%, transparent),
          transparent 34%
        ),
        var(--wrn-color-surface-raised);
      border-left: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
      box-shadow: -28px 0 80px color-mix(in srgb, black 28%, transparent);
      pointer-events: auto;
      overflow: hidden;
      /* Slides in from whichever edge the placement puts it on. */
      transform: translateX(100%);
      transition: transform var(--drawer-duration, 260ms) cubic-bezier(0.32, 0.72, 0, 1);
    }

    .wrn-drawer[data-open="true"] .wrn-drawer__panel {
      transform: none;
    }

    .wrn-drawer[data-placement="left"] .wrn-drawer__panel {
      transform: translateX(-100%);
    }

    .wrn-drawer[data-placement="top"] .wrn-drawer__panel {
      transform: translateY(-100%);
    }

    .wrn-drawer[data-placement="bottom"] .wrn-drawer__panel {
      transform: translateY(100%);
    }

    .wrn-drawer[data-open="true"][data-placement="left"] .wrn-drawer__panel,
    .wrn-drawer[data-open="true"][data-placement="top"] .wrn-drawer__panel,
    .wrn-drawer[data-open="true"][data-placement="bottom"] .wrn-drawer__panel {
      transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .wrn-drawer__layer,
      .wrn-drawer__panel {
        transition: none;
      }
    }

    .wrn-drawer[data-size="sm"] .wrn-drawer__panel {
      width: min(22rem, calc(100vw - 1rem));
    }

    .wrn-drawer[data-size="lg"] .wrn-drawer__panel {
      width: min(38rem, calc(100vw - 1rem));
    }

    .wrn-drawer[data-size="xl"] .wrn-drawer__panel {
      width: min(52rem, calc(100vw - 1rem));
    }

    .wrn-drawer[data-size="full"] .wrn-drawer__panel {
      width: 100vw;
    }

    .wrn-drawer[data-placement="left"] .wrn-drawer__panel {
      margin-right: auto;
      margin-left: 0;
      border-right: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
      border-left: 0;
      box-shadow: 28px 0 80px color-mix(in srgb, black 28%, transparent);
    }

    .wrn-drawer[data-placement="top"] .wrn-drawer__layer,
    .wrn-drawer[data-placement="bottom"] .wrn-drawer__layer {
      align-items: flex-start;
    }

    .wrn-drawer[data-placement="top"] .wrn-drawer__panel,
    .wrn-drawer[data-placement="bottom"] .wrn-drawer__panel {
      width: 100%;
      max-height: min(80vh, 44rem);
      margin: 0;
      border: 0;
      box-shadow: 0 24px 80px color-mix(in srgb, black 28%, transparent);
    }

    .wrn-drawer[data-placement="top"] .wrn-drawer__panel {
      border-bottom: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
    }

    .wrn-drawer[data-placement="bottom"] .wrn-drawer__layer {
      align-items: flex-end;
    }

    .wrn-drawer[data-placement="bottom"] .wrn-drawer__panel {
      border-top: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wrn-color-border));
      border-radius: 1.3rem 1.3rem 0 0;
    }

    .wrn-drawer[data-variant="soft"] .wrn-drawer__panel {
      background:
        linear-gradient(145deg, var(--drawer-soft), transparent 65%),
        var(--wrn-color-surface-raised);
    }

    .wrn-drawer[data-variant="solid"] .wrn-drawer__panel {
      color: var(--wrn-color-primary-contrast);
      background: var(--drawer-accent);
      border-color: color-mix(in srgb, white 18%, transparent);
    }

    .wrn-drawer__handle {
      display: none;
      width: 2.75rem;
      height: 0.28rem;
      margin: 0.55rem auto 0;
      background: color-mix(in srgb, var(--wrn-color-text-muted) 48%, transparent);
      border-radius: 999px;
    }

    .wrn-drawer[data-placement="bottom"] .wrn-drawer__handle {
      display: block;
    }

    .wrn-drawer__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.35rem 1.35rem 1.1rem;
      border-bottom: 1px solid var(--wrn-color-border);
    }

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

    .wrn-drawer__icon {
      flex: 0 0 auto;
      width: 1.25rem;
      height: 1.25rem;
      margin-top: 0.15rem;
      color: var(--drawer-accent);
    }

    .wrn-drawer[data-variant="solid"] .wrn-drawer__icon {
      color: currentColor;
    }

    .wrn-drawer__heading-copy {
      display: grid;
      gap: 0.3rem;
      min-width: 0;
    }

    .wrn-drawer__heading-copy h2,
    .wrn-drawer__heading-copy p {
      margin: 0;
    }

    .wrn-drawer__heading-copy h2 {
      font-size: 1.05rem;
      font-weight: 650;
      line-height: 1.3;
    }

    .wrn-drawer__heading-copy p {
      color: var(--wrn-color-text-muted);
      font-size: 0.8rem;
      line-height: 1.55;
    }

    .wrn-drawer[data-variant="solid"] .wrn-drawer__heading-copy p {
      color: color-mix(in srgb, currentColor 76%, transparent);
    }

    /*
     * padding is reset explicitly: an app-level `button { padding: ... }` rule
     * outranks the browser default and leaves this fixed-size button with a
     * content box of a couple of pixels, which squeezes the icon to a sliver
     * and reads as "the close button has no icon". Same trap as Modal.
     */
    .wrn-drawer__close {
      appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      padding: 0;
      width: 2.35rem;
      height: 2.35rem;
      color: var(--wrn-color-text-muted);
      background: var(--wrn-color-surface-soft);
      border: 1px solid var(--wrn-color-border);
      border-radius: 0.75rem;
      cursor: pointer;
    }

    .wrn-drawer__close:hover,
    .wrn-drawer__close:focus-visible {
      color: var(--drawer-accent);
      border-color: color-mix(in srgb, var(--drawer-accent) 34%, var(--wrn-color-border));
      outline: none;
    }

    /* Never let the glyph be shrunk by the flex container. */
    .wrn-drawer__close svg {
      flex: 0 0 auto;
      width: 1rem;
      height: 1rem;
    }

    /*
     * Slot content is authored by the host app, so the app global stylesheet
     * styles it too. A bare element selector there (p { color: ... }) beats
     * anything the panel merely *inherits*, which is how modal body copy ended
     * up muted grey on a saturated background. State the colour explicitly;
     * :where() keeps the specificity low enough that any class the app puts on
     * its own slot content still wins.
     */
    .wrn-drawer__body {
      flex: 1 1 auto;
      min-height: 0;
      padding: 1.35rem;
      color: var(--wrn-color-text);
    }

    .wrn-drawer__body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, span, label, code) {
      color: inherit;
    }

    .wrn-drawer[data-scrollable="true"] .wrn-drawer__body {
      overflow: auto;
      overscroll-behavior: contain;
    }

    .wrn-drawer__footer {
      padding: 1rem 1.35rem 1.35rem;
      border-top: 1px solid var(--wrn-color-border);
    }

    .wrn-drawer__footer:empty {
      display: none;
    }

    @media (max-width: 639px) {
      .wrn-drawer[data-placement="right"] .wrn-drawer__panel,
      .wrn-drawer[data-placement="left"] .wrn-drawer__panel {
        width: min(24rem, 100vw);
      }

      .wrn-drawer__header,
      .wrn-drawer__body,
      .wrn-drawer__footer {
        padding-inline: 1rem;
      }
    }
  }
}