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'
     data-wrn-owner="Drawer" data-wrn-part="root" data-wrn-component="Drawer" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-variant='{variant}'>

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

      <span class="wrn-drawer__trigger-slot" @click='showDrawer(event)' data-wrn-owner="Drawer" data-wrn-part="triggerSlot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
        <slot name="trigger"></slot>
      </span>

      <div
        class="wrn-drawer__layer"
        role="presentation"
        @keydown='handleKeydown(event)'
       data-wrn-owner="Drawer" data-wrn-part="layer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
        {#if overlay}
          <button
            type="button"
            class="wrn-drawer__backdrop"
            aria-label='{closeLabel}'
            @click='if (closeOnBackdrop) { cancelDrawer(event) }'
           data-wrn-owner="Drawer" data-wrn-part="backdrop" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></button>
        {/if}

        <section
          class="wrn-drawer__panel"
          role="dialog"
          aria-modal="true"
          aria-label='{label || title}'
          tabindex="-1"
         data-wrn-owner="Drawer" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
          <div class="wrn-drawer__handle" aria-hidden="true" data-wrn-owner="Drawer" data-wrn-part="handle" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>

          <header class="wrn-drawer__header" data-wrn-owner="Drawer" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
            <div class="wrn-drawer__heading" data-wrn-owner="Drawer" data-wrn-part="heading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
              {#if icon}
                <span class='wrn-drawer__icon {icon}' aria-hidden="true" data-wrn-owner="Drawer" data-wrn-part="icon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></span>
              {/if}

              <div class="wrn-drawer__heading-copy" data-wrn-owner="Drawer" data-wrn-part="headingCopy" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
                <slot name="header"></slot>
                {#if title}
                  <h2 data-wrn-owner="Drawer" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{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)'
               data-wrn-owner="Drawer" data-wrn-part="close" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false" data-wrn-owner="Drawer" data-wrn-part="vector" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><path d="M6 6l12 12M18 6 6 18" /></svg>
              </button>
            {/if}
          </header>

          <div class="wrn-drawer__body" data-wrn-owner="Drawer" data-wrn-part="body" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
            <slot></slot>
          </div>

          <footer class="wrn-drawer__footer" data-wrn-owner="Drawer" data-wrn-part="footer" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
            <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: var(--wrn-control-height, 2.5rem);
      padding: 0 0.95rem;
      color: var(--wrn-color-primary-contrast);
      background: linear-gradient(180deg, color-mix(in srgb, var(--drawer-accent) 92%, white), var(--drawer-accent));
      border: 1px solid color-mix(in srgb, var(--drawer-accent) 82%, black);
      border-bottom-color: color-mix(in srgb, var(--drawer-accent) 64%, black);
      border-radius: var(--wrn-radius-sm);
      box-shadow: var(--wrn-highlight-edge, none), 0 1px 2px color-mix(in srgb, var(--drawer-accent) 30%, transparent);
      font: inherit;
      font-size: 0.875rem;
      font-weight: 600;
      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: rgb(10 11 14 / 0.5);
      border: 0;
      backdrop-filter: blur(4px);
      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: var(--wrn-color-surface-raised);
      border-left: 1px solid var(--wrn-color-border);
      box-shadow: var(--wrn-shadow-3);
      pointer-events: auto;
      overflow: hidden;
      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 var(--wrn-color-border);
      border-left: 0;
      box-shadow: var(--wrn-shadow-3);
    }

    .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: var(--wrn-shadow-3);
    }

    .wrn-drawer[data-placement="top"] .wrn-drawer__panel {
      border-bottom: 1px solid 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 var(--wrn-color-border);
      border-radius: var(--wrn-radius-lg) var(--wrn-radius-lg) 0 0;
    }

    .wrn-drawer[data-variant="soft"] .wrn-drawer__panel {
      background:
        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: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.25rem 1.25rem 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.0625rem;
      font-weight: 650;
      letter-spacing: -0.015em;
      line-height: 1.35;
    }

    .wrn-drawer__heading-copy p {
      color: var(--wrn-color-text-muted);
      font-size: 0.8125rem;
      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(--wrn-color-text);
      background: var(--wrn-color-surface-muted, var(--wrn-color-surface-soft));
      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: 0.875rem 1.25rem;
      border-top: 1px solid var(--wrn-color-border);
      background: var(--wrn-color-surface-soft, transparent);
    }

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

    @media (max-width: 767px) {
      .wrn-drawer__header {
        padding-block: 0.75rem;
      }
    }

    @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;
      }
    }
  }
}