@konomi-app/ui 5.3.2 → 5.4.1

package/dist/index.cjs

@@ -32,13 +32,24 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet(obj, member, value, setter);
+  },
+  get _() {
+    return __privateGet(obj, member, getter);
+  }
+});
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
   DialogController: () => DialogController,
   OverlayDialog: () => OverlayDialog,
-  dialog: () => dialog
+  ToastContainer: () => ToastContainer,
+  ToastController: () => ToastController,
+  dialog: () => dialog,
+  toast: () => toast
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -2309,10 +2320,909 @@ ensureElement_fn = function() {
   __privateSet(this, _element, el);
 };
 var dialog = new DialogSingleton();
+
+// src/toast/types.ts
+var createInitialToastState = () => ({
+  items: [],
+  position: "bottom-right",
+  maxVisible: 3,
+  defaultDuration: 4e3
+});
+
+// src/toast/controller.ts
+var DISMISS_ANIMATION_MS = 400;
+var _state2, _listeners2, _timers, _timerStartedAt, _dismissTimers, _nextId, _ToastController_instances, emit_fn2, update_fn2, startTimer_fn, clearTimer_fn2, beginDismiss_fn, removeItem_fn, updateItem_fn, findItem_fn, enforceMaxVisible_fn;
+var ToastController = class {
+  constructor() {
+    __privateAdd(this, _ToastController_instances);
+    __privateAdd(this, _state2);
+    __privateAdd(this, _listeners2, /* @__PURE__ */ new Set());
+    // ─── Per-toast timer management ─────────────────────────
+    __privateAdd(this, _timers, /* @__PURE__ */ new Map());
+    __privateAdd(this, _timerStartedAt, /* @__PURE__ */ new Map());
+    __privateAdd(this, _dismissTimers, /* @__PURE__ */ new Map());
+    __privateAdd(this, _nextId, 0);
+    __privateSet(this, _state2, createInitialToastState());
+  }
+  // ─── Observable ─────────────────────────────────────────
+  get state() {
+    return __privateGet(this, _state2);
+  }
+  subscribe(fn) {
+    __privateGet(this, _listeners2).add(fn);
+    return () => __privateGet(this, _listeners2).delete(fn);
+  }
+  // ─── Configuration ──────────────────────────────────────
+  configure(config) {
+    const patch = {};
+    if (config.position != null) patch.position = config.position;
+    if (config.maxVisible != null) patch.maxVisible = config.maxVisible;
+    if (config.defaultDuration != null) patch.defaultDuration = config.defaultDuration;
+    if (Object.keys(patch).length > 0) __privateMethod(this, _ToastController_instances, update_fn2).call(this, patch);
+  }
+  // ─── Show ───────────────────────────────────────────────
+  show(options) {
+    const id = `toast-${++__privateWrapper(this, _nextId)._}`;
+    const duration = options.duration ?? __privateGet(this, _state2).defaultDuration;
+    const item = {
+      id,
+      type: options.type ?? "info",
+      message: options.message,
+      description: options.description ?? "",
+      action: options.action ?? null,
+      duration,
+      remainingMs: duration,
+      paused: false,
+      dismissing: false
+    };
+    const items = [...__privateGet(this, _state2).items, item];
+    __privateMethod(this, _ToastController_instances, update_fn2).call(this, { items });
+    if (duration > 0) {
+      __privateMethod(this, _ToastController_instances, startTimer_fn).call(this, id, duration);
+    }
+    __privateMethod(this, _ToastController_instances, enforceMaxVisible_fn).call(this);
+    return id;
+  }
+  success(message, options) {
+    return this.show({ ...options, type: "success", message });
+  }
+  error(message, options) {
+    return this.show({ ...options, type: "error", message });
+  }
+  warning(message, options) {
+    return this.show({ ...options, type: "warning", message });
+  }
+  info(message, options) {
+    return this.show({ ...options, type: "info", message });
+  }
+  loading(message, options) {
+    return this.show({ duration: 0, ...options, type: "loading", message });
+  }
+  // ─── Dismiss ────────────────────────────────────────────
+  dismiss(id) {
+    const item = __privateMethod(this, _ToastController_instances, findItem_fn).call(this, id);
+    if (!item || item.dismissing) return;
+    __privateMethod(this, _ToastController_instances, beginDismiss_fn).call(this, id);
+  }
+  dismissAll() {
+    for (const item of __privateGet(this, _state2).items) {
+      __privateMethod(this, _ToastController_instances, clearTimer_fn2).call(this, item.id);
+      __privateGet(this, _timerStartedAt).delete(item.id);
+    }
+    const items = __privateGet(this, _state2).items.filter((i) => !i.dismissing).map((item) => ({ ...item, dismissing: true, paused: true }));
+    __privateMethod(this, _ToastController_instances, update_fn2).call(this, { items });
+    const timer = setTimeout(() => {
+      __privateMethod(this, _ToastController_instances, update_fn2).call(this, { items: [] });
+      __privateGet(this, _dismissTimers).clear();
+    }, DISMISS_ANIMATION_MS);
+    __privateGet(this, _dismissTimers).set("__all__", timer);
+  }
+  // ─── Update ─────────────────────────────────────────────
+  update(id, patch) {
+    const item = __privateMethod(this, _ToastController_instances, findItem_fn).call(this, id);
+    if (!item || item.dismissing) return;
+    const { duration: newDuration, ...rest } = patch;
+    const isLeavingLoading = item.type === "loading" && rest.type != null && rest.type !== "loading";
+    if (newDuration !== void 0) {
+      __privateMethod(this, _ToastController_instances, clearTimer_fn2).call(this, id);
+      __privateMethod(this, _ToastController_instances, updateItem_fn).call(this, id, { ...rest, duration: newDuration, remainingMs: newDuration, paused: false });
+      if (newDuration > 0) {
+        __privateMethod(this, _ToastController_instances, startTimer_fn).call(this, id, newDuration);
+      }
+    } else if (isLeavingLoading) {
+      const autoMs = __privateGet(this, _state2).defaultDuration;
+      __privateMethod(this, _ToastController_instances, updateItem_fn).call(this, id, { ...rest, duration: autoMs, remainingMs: autoMs, paused: false });
+      if (autoMs > 0) {
+        __privateMethod(this, _ToastController_instances, startTimer_fn).call(this, id, autoMs);
+      }
+    } else {
+      __privateMethod(this, _ToastController_instances, updateItem_fn).call(this, id, rest);
+    }
+  }
+  // ─── Timer control (called from component) ─────────────
+  pauseTimer(id) {
+    const item = __privateMethod(this, _ToastController_instances, findItem_fn).call(this, id);
+    if (!item || item.paused || item.dismissing || item.duration <= 0) return;
+    const startedAt = __privateGet(this, _timerStartedAt).get(id);
+    if (startedAt == null) return;
+    __privateMethod(this, _ToastController_instances, clearTimer_fn2).call(this, id);
+    const elapsed = Date.now() - startedAt;
+    const remainingMs = Math.max(0, item.remainingMs - elapsed);
+    __privateGet(this, _timerStartedAt).delete(id);
+    __privateMethod(this, _ToastController_instances, updateItem_fn).call(this, id, { paused: true, remainingMs });
+  }
+  resumeTimer(id) {
+    const item = __privateMethod(this, _ToastController_instances, findItem_fn).call(this, id);
+    if (!item || !item.paused || item.dismissing || item.duration <= 0) return;
+    __privateMethod(this, _ToastController_instances, updateItem_fn).call(this, id, { paused: false });
+    const updated = __privateMethod(this, _ToastController_instances, findItem_fn).call(this, id);
+    if (updated && updated.remainingMs > 0) {
+      __privateMethod(this, _ToastController_instances, startTimer_fn).call(this, id, updated.remainingMs);
+    }
+  }
+};
+_state2 = new WeakMap();
+_listeners2 = new WeakMap();
+_timers = new WeakMap();
+_timerStartedAt = new WeakMap();
+_dismissTimers = new WeakMap();
+_nextId = new WeakMap();
+_ToastController_instances = new WeakSet();
+emit_fn2 = function() {
+  const snapshot = { ...__privateGet(this, _state2), items: [...__privateGet(this, _state2).items] };
+  for (const fn of __privateGet(this, _listeners2)) fn(snapshot);
+};
+update_fn2 = function(patch) {
+  Object.assign(__privateGet(this, _state2), patch);
+  __privateMethod(this, _ToastController_instances, emit_fn2).call(this);
+};
+// ─── Internal ───────────────────────────────────────────
+startTimer_fn = function(id, durationMs) {
+  __privateMethod(this, _ToastController_instances, clearTimer_fn2).call(this, id);
+  __privateGet(this, _timerStartedAt).set(id, Date.now());
+  __privateGet(this, _timers).set(
+    id,
+    setTimeout(() => {
+      __privateGet(this, _timers).delete(id);
+      __privateGet(this, _timerStartedAt).delete(id);
+      __privateMethod(this, _ToastController_instances, beginDismiss_fn).call(this, id);
+    }, durationMs)
+  );
+};
+clearTimer_fn2 = function(id) {
+  const timer = __privateGet(this, _timers).get(id);
+  if (timer != null) {
+    clearTimeout(timer);
+    __privateGet(this, _timers).delete(id);
+  }
+};
+beginDismiss_fn = function(id) {
+  __privateMethod(this, _ToastController_instances, clearTimer_fn2).call(this, id);
+  __privateGet(this, _timerStartedAt).delete(id);
+  const item = __privateMethod(this, _ToastController_instances, findItem_fn).call(this, id);
+  if (!item || item.dismissing) return;
+  __privateMethod(this, _ToastController_instances, updateItem_fn).call(this, id, { dismissing: true, paused: true });
+  __privateGet(this, _dismissTimers).set(
+    id,
+    setTimeout(() => {
+      __privateMethod(this, _ToastController_instances, removeItem_fn).call(this, id);
+      __privateGet(this, _dismissTimers).delete(id);
+    }, DISMISS_ANIMATION_MS)
+  );
+};
+removeItem_fn = function(id) {
+  const items = __privateGet(this, _state2).items.filter((i) => i.id !== id);
+  __privateMethod(this, _ToastController_instances, update_fn2).call(this, { items });
+};
+updateItem_fn = function(id, patch) {
+  const items = __privateGet(this, _state2).items.map((item) => item.id === id ? { ...item, ...patch } : item);
+  __privateMethod(this, _ToastController_instances, update_fn2).call(this, { items });
+};
+findItem_fn = function(id) {
+  return __privateGet(this, _state2).items.find((i) => i.id === id);
+};
+enforceMaxVisible_fn = function() {
+  const active = __privateGet(this, _state2).items.filter((i) => !i.dismissing);
+  const excess = active.length - __privateGet(this, _state2).maxVisible;
+  if (excess <= 0) return;
+  for (let i = 0; i < excess; i++) {
+    __privateMethod(this, _ToastController_instances, beginDismiss_fn).call(this, active[i].id);
+  }
+};
+
+// src/toast/toast-container.ts
+var import_lit4 = require("lit");
+var import_decorators2 = require("lit/decorators.js");
+var import_repeat = require("lit/directives/repeat.js");
+
+// src/toast/styles.ts
+var import_lit3 = require("lit");
+var toastStyles = import_lit3.css`
+  :host {
+    /* ─── Customizable CSS Variables ─── */
+    --toast-font-family: var(
+      --dialog-font-family,
+      'Yu Gothic Medium',
+      '游ゴシック',
+      YuGothic,
+      'メイリオ',
+      'Hiragino Kaku Gothic ProN',
+      Meiryo,
+      sans-serif
+    );
+    --toast-text-color: var(--dialog-text-color, #356);
+    --toast-z-index: 1100;
+
+    /* Container */
+    --toast-gap: 12px;
+    --toast-padding: 16px;
+    --toast-max-width: 420px;
+
+    /* Card */
+    --toast-card-bg: #fff;
+    --toast-card-border: #f3f4f6;
+    --toast-card-shadow: 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);
+    --toast-card-radius: 8px;
+    --toast-card-padding: 14px 16px;
+
+    /* Colors (inherit from dialog when available) */
+    --toast-success: var(--dialog-success, #22c55e);
+    --toast-error: var(--dialog-error, #ef4444);
+    --toast-warning: var(--dialog-warning, #f59e0b);
+    --toast-info: var(--dialog-info, #3b82f6);
+    --toast-loading: var(--dialog-primary, #3b82f6);
+    --toast-spinner-track: rgb(59 130 246 / 0.2);
+    --toast-spinner-arc: var(--toast-loading);
+
+    /* Progress bar */
+    --toast-progress-height: 3px;
+
+    /* Close button */
+    --toast-close-color: #9ca3af;
+    --toast-close-hover-color: #374151;
+
+    /* Timing */
+    --toast-enter-duration: 350ms;
+    --toast-exit-duration: 200ms;
+    --toast-collapse-duration: 200ms;
+
+    display: contents;
+    font-family: var(--toast-font-family);
+    color: var(--toast-text-color);
+  }
+
+  /* ─── Container ─── */
+
+  .container {
+    position: fixed;
+    z-index: var(--toast-z-index);
+    display: flex;
+    flex-direction: column;
+    gap: var(--toast-gap);
+    padding: var(--toast-padding);
+    pointer-events: none;
+    max-height: 100vh;
+    max-width: var(--toast-max-width);
+    box-sizing: border-box;
+  }
+
+  /* Position variants */
+  .container[data-position='top-right'] {
+    top: 0;
+    right: 0;
+  }
+  .container[data-position='top-left'] {
+    top: 0;
+    left: 0;
+  }
+  .container[data-position='top-center'] {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .container[data-position='bottom-right'] {
+    bottom: 0;
+    right: 0;
+    flex-direction: column-reverse;
+  }
+  .container[data-position='bottom-left'] {
+    bottom: 0;
+    left: 0;
+    flex-direction: column-reverse;
+  }
+  .container[data-position='bottom-center'] {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: column-reverse;
+  }
+
+  /* Responsive: full-width on mobile */
+  @media (max-width: 639px) {
+    .container {
+      max-width: 100%;
+      width: 100%;
+      left: 0;
+      right: 0;
+      transform: none;
+    }
+    .container[data-position^='top'] {
+      top: 0;
+      flex-direction: column;
+    }
+    .container[data-position^='bottom'] {
+      bottom: 0;
+      flex-direction: column-reverse;
+    }
+  }
+
+  /* ─── Direction-based transform variables ─── */
+
+  .container[data-position$='right'] {
+    --_enter-x: 110%;
+    --_exit-x: 110%;
+    --_enter-y: 0;
+    --_exit-y: 0;
+  }
+  .container[data-position$='left'] {
+    --_enter-x: -110%;
+    --_exit-x: -110%;
+    --_enter-y: 0;
+    --_exit-y: 0;
+  }
+  .container[data-position='top-center'] {
+    --_enter-x: 0;
+    --_exit-x: 0;
+    --_enter-y: -100%;
+    --_exit-y: -100%;
+  }
+  .container[data-position='bottom-center'] {
+    --_enter-x: 0;
+    --_exit-x: 0;
+    --_enter-y: 100%;
+    --_exit-y: 100%;
+  }
+
+  @media (max-width: 639px) {
+    .container[data-position^='top'] {
+      --_enter-x: 0;
+      --_exit-x: 0;
+      --_enter-y: -100%;
+      --_exit-y: -100%;
+    }
+    .container[data-position^='bottom'] {
+      --_enter-x: 0;
+      --_exit-x: 0;
+      --_enter-y: 100%;
+      --_exit-y: 100%;
+    }
+  }
+
+  /* ─── Toast Slot (height-collapsing wrapper) ─── */
+
+  .toast-slot {
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows var(--toast-collapse-duration) ease var(--toast-exit-duration);
+    pointer-events: auto;
+  }
+
+  .toast-slot[data-dismissing] {
+    grid-template-rows: 0fr;
+  }
+
+  .toast-slot > .toast-card {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  /* ─── Toast Card ─── */
+
+  .toast-card {
+    background: var(--toast-card-bg);
+    border: 1px solid var(--toast-card-border);
+    border-radius: var(--toast-card-radius);
+    box-shadow: var(--toast-card-shadow);
+    position: relative;
+    overflow: hidden;
+    animation: toast-enter var(--toast-enter-duration) cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
+  .toast-card[data-dismissing] {
+    animation: toast-exit var(--toast-exit-duration) ease both;
+    pointer-events: none;
+  }
+
+  /* Type-based left accent */
+  .toast-card[data-type='success'] {
+    border-left: 3px solid var(--toast-success);
+  }
+  .toast-card[data-type='error'] {
+    border-left: 3px solid var(--toast-error);
+  }
+  .toast-card[data-type='warning'] {
+    border-left: 3px solid var(--toast-warning);
+  }
+  .toast-card[data-type='info'] {
+    border-left: 3px solid var(--toast-info);
+  }
+  .toast-card[data-type='loading'] {
+    border-left: 3px solid var(--toast-loading);
+  }
+
+  /* ─── Animations ─── */
+
+  @keyframes toast-enter {
+    from {
+      opacity: 0;
+      transform: translateX(var(--_enter-x, 0)) translateY(var(--_enter-y, 0));
+      filter: blur(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0) translateY(0);
+      filter: blur(0);
+    }
+  }
+
+  @keyframes toast-exit {
+    from {
+      opacity: 1;
+      transform: translateX(0) translateY(0);
+      filter: blur(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(var(--_exit-x, 0)) translateY(var(--_exit-y, 0));
+      filter: blur(3px);
+    }
+  }
+
+  /* ─── Body ─── */
+
+  .toast-body {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: var(--toast-card-padding);
+  }
+
+  /* ─── Icon ─── */
+
+  .toast-icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    margin-top: 1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toast-icon svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .icon-success {
+    color: var(--toast-success);
+  }
+  .icon-error {
+    color: var(--toast-error);
+  }
+  .icon-warning {
+    color: var(--toast-warning);
+  }
+  .icon-info {
+    color: var(--toast-info);
+  }
+  .icon-loading {
+    color: var(--toast-loading);
+  }
+
+  /* ─── Loading Spinner ─── */
+
+  @keyframes toast-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .toast-spinner {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2px var(--toast-spinner-track);
+    position: relative;
+    animation: toast-spin 1.2s infinite linear;
+    flex-shrink: 0;
+  }
+
+  .toast-spinner-half {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 10px;
+    height: 20px;
+    margin-left: -10px;
+    margin-top: -10px;
+    overflow: hidden;
+    transform-origin: 10px 10px;
+    mask-image: linear-gradient(to bottom, #000f, #0000);
+    -webkit-mask-image: linear-gradient(to bottom, #000f, #0000);
+  }
+
+  .toast-spinner-inner {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2px var(--toast-spinner-arc);
+  }
+
+  /* ─── Text ─── */
+
+  .toast-text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .toast-message {
+    font-size: 14px;
+    font-weight: 500;
+    color: #1f2937;
+    margin: 0;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  .toast-description {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 0;
+    word-break: break-word;
+    line-height: 1.5;
+  }
+
+  /* ─── Action Button ─── */
+
+  .toast-action-btn {
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--toast-info);
+    cursor: pointer;
+    align-self: flex-start;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color 150ms ease;
+  }
+
+  .toast-action-btn:hover {
+    color: var(--dialog-primary-hover, #2563eb);
+  }
+
+  /* ─── Close Button ─── */
+
+  .toast-close {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--toast-close-color);
+    transition: color 150ms ease;
+    border-radius: 4px;
+  }
+
+  .toast-close svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .toast-close:hover {
+    color: var(--toast-close-hover-color);
+  }
+
+  @media (min-width: 640px) {
+    .toast-close {
+      opacity: 0.5;
+      transition:
+        opacity 150ms ease,
+        color 150ms ease;
+    }
+    .toast-card:hover .toast-close {
+      opacity: 1;
+    }
+  }
+
+  /* ─── Progress Bar ─── */
+
+  .toast-progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: var(--toast-progress-height);
+    width: 100%;
+    border-radius: 0 0 var(--toast-card-radius) var(--toast-card-radius);
+    animation: toast-progress-countdown linear forwards;
+    animation-play-state: running;
+  }
+
+  .toast-card[data-paused] .toast-progress {
+    animation-play-state: paused;
+  }
+
+  @keyframes toast-progress-countdown {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0%;
+    }
+  }
+
+  .toast-progress[data-type='success'] {
+    background-color: var(--toast-success);
+  }
+  .toast-progress[data-type='error'] {
+    background-color: var(--toast-error);
+  }
+  .toast-progress[data-type='warning'] {
+    background-color: var(--toast-warning);
+  }
+  .toast-progress[data-type='info'] {
+    background-color: var(--toast-info);
+  }
+`;
+
+// src/toast/toast-container.ts
+var ToastContainer = class extends import_lit4.LitElement {
+  constructor() {
+    super(...arguments);
+    this._state = createInitialToastState();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.controller) {
+      this._state = { ...this.controller.state };
+      this._unsubscribe = this.controller.subscribe((s) => {
+        this._state = s;
+      });
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unsubscribe?.();
+  }
+  // ─── Icon Rendering ─────────────────────────────────────
+  _renderIcon(type) {
+    switch (type) {
+      case "success":
+        return import_lit4.html`<svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <polyline points="9,12 11,14 15,10" />
+        </svg>`;
+      case "error":
+        return import_lit4.html`<svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="15" y1="9" x2="9" y2="15" />
+          <line x1="9" y1="9" x2="15" y2="15" />
+        </svg>`;
+      case "warning":
+        return import_lit4.html`<svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path
+            d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+          />
+          <line x1="12" y1="9" x2="12" y2="13" />
+          <line x1="12" y1="17" x2="12.01" y2="17" />
+        </svg>`;
+      case "info":
+        return import_lit4.html`<svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="16" x2="12" y2="12" />
+          <line x1="12" y1="8" x2="12.01" y2="8" />
+        </svg>`;
+      case "loading":
+        return import_lit4.html`
+          <div class="toast-spinner">
+            <div class="toast-spinner-half">
+              <div class="toast-spinner-inner"></div>
+            </div>
+          </div>
+        `;
+    }
+  }
+  // ─── Toast Rendering ────────────────────────────────────
+  _renderToast(item) {
+    return import_lit4.html`
+      <div class="toast-slot" ?data-dismissing=${item.dismissing}>
+        <div
+          class="toast-card"
+          data-type=${item.type}
+          ?data-dismissing=${item.dismissing}
+          ?data-paused=${item.paused}
+          @mouseenter=${() => this.controller.pauseTimer(item.id)}
+          @mouseleave=${() => this.controller.resumeTimer(item.id)}
+        >
+          <div class="toast-body">
+            <span class="toast-icon icon-${item.type}"> ${this._renderIcon(item.type)} </span>
+            <div class="toast-text">
+              <p class="toast-message">${item.message}</p>
+              ${item.description ? import_lit4.html`<p class="toast-description">${item.description}</p>` : import_lit4.nothing}
+              ${item.action ? import_lit4.html`<button
+                    class="toast-action-btn"
+                    @click=${() => {
+      item.action.onClick();
+      this.controller.dismiss(item.id);
+    }}
+                  >
+                    ${item.action.label}
+                  </button>` : import_lit4.nothing}
+            </div>
+            <button
+              class="toast-close"
+              @click=${() => this.controller.dismiss(item.id)}
+              aria-label="閉じる"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </div>
+          ${item.duration > 0 && item.type !== "loading" ? import_lit4.html`<div
+                class="toast-progress"
+                style="animation-duration:${item.duration}ms"
+                data-type=${item.type}
+              ></div>` : import_lit4.nothing}
+        </div>
+      </div>
+    `;
+  }
+  // ─── Main Render ────────────────────────────────────────
+  render() {
+    const s = this._state;
+    return import_lit4.html`
+      <div class="container" data-position=${s.position} role="region" aria-label="通知">
+        ${(0, import_repeat.repeat)(
+      s.items,
+      (item) => item.id,
+      (item) => this._renderToast(item)
+    )}
+      </div>
+    `;
+  }
+};
+ToastContainer.styles = toastStyles;
+__decorateClass([
+  (0, import_decorators2.property)({ attribute: false })
+], ToastContainer.prototype, "controller", 2);
+__decorateClass([
+  (0, import_decorators2.state)()
+], ToastContainer.prototype, "_state", 2);
+ToastContainer = __decorateClass([
+  (0, import_decorators2.customElement)("toast-container")
+], ToastContainer);
+
+// src/toast/toast.ts
+var _controller2, _element2, _ToastSingleton_instances, ensureElement_fn2;
+var ToastSingleton = class {
+  constructor() {
+    __privateAdd(this, _ToastSingleton_instances);
+    __privateAdd(this, _controller2, new ToastController());
+    __privateAdd(this, _element2, null);
+  }
+  // ─── Configuration ──────────────────────────────────────
+  configure(config) {
+    __privateGet(this, _controller2).configure(config);
+  }
+  // ─── Show Methods ───────────────────────────────────────
+  show(options) {
+    __privateMethod(this, _ToastSingleton_instances, ensureElement_fn2).call(this);
+    return __privateGet(this, _controller2).show(options);
+  }
+  success(message, options) {
+    __privateMethod(this, _ToastSingleton_instances, ensureElement_fn2).call(this);
+    return __privateGet(this, _controller2).success(message, options);
+  }
+  error(message, options) {
+    __privateMethod(this, _ToastSingleton_instances, ensureElement_fn2).call(this);
+    return __privateGet(this, _controller2).error(message, options);
+  }
+  warning(message, options) {
+    __privateMethod(this, _ToastSingleton_instances, ensureElement_fn2).call(this);
+    return __privateGet(this, _controller2).warning(message, options);
+  }
+  info(message, options) {
+    __privateMethod(this, _ToastSingleton_instances, ensureElement_fn2).call(this);
+    return __privateGet(this, _controller2).info(message, options);
+  }
+  loading(message, options) {
+    __privateMethod(this, _ToastSingleton_instances, ensureElement_fn2).call(this);
+    return __privateGet(this, _controller2).loading(message, options);
+  }
+  // ─── Dismiss ────────────────────────────────────────────
+  dismiss(id) {
+    __privateGet(this, _controller2).dismiss(id);
+  }
+  dismissAll() {
+    __privateGet(this, _controller2).dismissAll();
+  }
+  // ─── Update ─────────────────────────────────────────────
+  update(id, patch) {
+    __privateGet(this, _controller2).update(id, patch);
+  }
+  // ─── Advanced ───────────────────────────────────────────
+  get controller() {
+    return __privateGet(this, _controller2);
+  }
+};
+_controller2 = new WeakMap();
+_element2 = new WeakMap();
+_ToastSingleton_instances = new WeakSet();
+ensureElement_fn2 = function() {
+  if (__privateGet(this, _element2)) return;
+  if (typeof document === "undefined") return;
+  const el = document.createElement("toast-container");
+  el.controller = __privateGet(this, _controller2);
+  document.body.appendChild(el);
+  __privateSet(this, _element2, el);
+};
+var toast = new ToastSingleton();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DialogController,
   OverlayDialog,
-  dialog
+  ToastContainer,
+  ToastController,
+  dialog,
+  toast
 });
 //# sourceMappingURL=index.cjs.map