覆蓋層 Modal / Dialog / Toast

Modal 彈窗 .lct-modal

面板式彈窗（例如「加入收藏夾」）。結構是：.lct-scrim（半透明遮罩）包住 .lct-modal（面板）。

<!-- 觸發按鈕 -->
<button class="lct-btn lct-btn--primary"
        data-lct-toggle="modal" data-lct-target="#favModal">加入收藏夾</button>

<!-- 彈窗本體 -->
<div id="favModal" class="lct-scrim" aria-hidden="true">
  <div class="lct-modal" role="dialog" aria-modal="true">
    <div class="lct-modal__header">
      <h3 class="lct-modal__title">加入收藏夾</h3>
      <button class="lct-modal__close" data-lct-dismiss aria-label="關閉">
        <svg class="lct-icon" viewBox="0 0 256 256"><!-- ✕ --></svg>
      </button>
    </div>

    <p class="lct-modal__subtitle">胡桃木 木紋（深色）</p>

    <div class="lct-modal__body">
      <div class="lct-option-row">
        <span class="lct-option-row__name">常用木皮</span>
        <span class="lct-option-row__count">12 項</span>
        <button class="lct-btn lct-btn--primary lct-btn--sm">加入</button>
      </div>
      <div class="lct-option-row">
        <span class="lct-option-row__name">客廳提案</span>
        <span class="lct-option-row__count">5 項</span>
        <button class="lct-btn lct-btn--primary lct-btn--sm is-disabled" disabled>加入</button>
      </div>
    </div>

    <div class="lct-modal__footer">
      <input class="lct-input" type="text" placeholder="新建收藏夾名稱">
      <button class="lct-btn lct-btn--primary">建立並加入</button>
    </div>
  </div>
</div>

開關規則（由 lucent-ui.js 自動處理）：

• 點 data-lct-toggle="modal" → 開啟 data-lct-target 指定的彈窗
• 點 data-lct-dismiss（關閉鈕 / 取消鈕）、點遮罩空白處、或按 ESC → 關閉
• 也可用程式：Lucent.openModal('#favModal') / Lucent.closeModal('#favModal')

.lct-option-row 是 Modal 內的可選列（如收藏夾清單），有 __name 與 __count 兩個子元素。

確認對話框 .lct-dialog

置中的小型確認框（例如「移除收藏」「刪除收藏夾」）。除了手寫 HTML，更推薦用 JS 一行叫出。

用 JS（推薦）

Lucent.confirm({
  title: '移除收藏',
  text: '確定要將此材質從收藏夾移除嗎？',
  confirmText: '確認移除',
  cancelText: '取消',
  danger: true            // 確認鈕用紅色 danger 樣式
}).then(function (ok) {
  if (ok) {
    // 使用者按了「確認移除」
  }
});

Lucent.confirm() 回傳一個 Promise<boolean>，按確認為 true、取消或關閉為 false。

手寫 HTML

<div class="lct-scrim is-open">
  <div class="lct-dialog" role="dialog" aria-modal="true">
    <h3 class="lct-dialog__title">刪除收藏夾</h3>
    <p class="lct-dialog__text">確定要將此收藏夾刪除嗎？此動作無法復原。</p>
    <div class="lct-dialog__btns">
      <button class="lct-btn lct-btn--secondary" data-lct-dismiss>取消</button>
      <button class="lct-btn lct-btn--danger">確認刪除</button>
    </div>
  </div>
</div>

通知列 .lct-bar（含使用者常用的 error-bar）

行內通知條，四種語意色。適合放在頁面頂部或內容區內。

<div class="lct-bar lct-bar--success">成功加入收藏夾</div>
<div class="lct-bar lct-bar--error">報價單匯出失敗，請重試</div>
<div class="lct-bar lct-bar--warning">套用材質前請先選取面</div>
<div class="lct-bar lct-bar--info">已成功清除材料</div>

Toast 浮出提示

用 JS 叫出、會自動消失的浮動提示，堆疊在畫面上方置中。

// 預設用通知列樣式，3 秒後自動消失
Lucent.toast({ type: 'success', message: '已加入收藏夾' });

// 錯誤、不自動消失（duration:0 表示常駐，需手動關閉）
Lucent.toast({ type: 'error', message: '匯出失敗', duration: 0 });

// solid:true 使用實心深色 Toast
Lucent.toast({ type: 'warning', message: '尚未選取材質', solid: true });

Lucent.toast() 回傳 { dismiss, el }，可用 dismiss() 手動關閉。

下拉選單 .lct-menu

點擊觸發的選單（例如「匯出」）。用 .lct-dropdown 當容器。

<div class="lct-dropdown">
  <button class="lct-btn lct-btn--secondary" data-lct-toggle="dropdown">匯出 ▾</button>
  <div class="lct-dropdown__menu">
    <div class="lct-menu">
      <button class="lct-menu-item">匯出 PDF</button>
      <button class="lct-menu-item">匯出 Excel</button>
      <div class="lct-menu__divider"></div>
      <button class="lct-menu-item lct-menu-item--danger">刪除報價單</button>
    </div>
  </div>
</div>

點按鈕開合、點選單外自動關閉（由 lucent-ui.js 處理）。--danger 是紅色的危險項目。