Popconfirm

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="bottom"
      confirmtext="보관"
      canceltext="취소"
      arrow
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="top"
      confirmtext="보관"
      canceltext="취소"
      arrow
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="bottom"
      confirmtext="보관"
      canceltext="취소"
      arrow
      closable
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="bottom"
      confirmtext="보관"
      canceltext="취소"
      arrow
      trigger="none"
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">확인 열기</sy-button>
  <sy-button id="action-1" size="small">닫기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setOpen();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setClose();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="bottom"
      confirmtext="보관"
      canceltext="취소"
      arrow
      animation="none"
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["visibleChanged", "selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>보관하기<sy-popconfirm
      position="bottom"
      confirmtext="보관"
      canceltext="취소"
      animation="none"
      id="sample"
    ><span>이 예제 항목을 보관할까요?</span></sy-popconfirm>
  </sy-button>
</div>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "arrow": false
  });
</script>