@konomi-app/ui 5.2.1 → 5.4.0

package/dist/index.js

@@ -16,6 +16,14 @@ 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/types.ts
 var createInitialState = () => ({
@@ -35,14 +43,168 @@ var createInitialState = () => ({
   queues: [],
   steps: [],
   timer: null,
-  title: ""
+  title: "",
+  formFields: [],
+  formValues: {},
+  formErrors: {},
+  formTouched: {},
+  formLayout: {},
+  formValidateOnChange: true,
+  formValidateOnBlur: true,
+  stepFormSteps: [],
+  stepFormCurrentIndex: 0,
+  stepFormNextText: "\u6B21\u3078",
+  stepFormPrevText: "\u623B\u308B",
+  stepFormSubmitText: "OK"
 });
 
+// src/zod-utils.ts
+function resolveTypeName(field) {
+  const raw = field._def.typeName ?? field._def.type;
+  if (!raw) return "";
+  const v4Map = {
+    string: "ZodString",
+    number: "ZodNumber",
+    boolean: "ZodBoolean",
+    enum: "ZodEnum",
+    date: "ZodDate",
+    optional: "ZodOptional",
+    nullable: "ZodNullable",
+    default: "ZodDefault",
+    object: "ZodObject",
+    pipe: "ZodPipe"
+  };
+  return v4Map[raw] ?? raw;
+}
+function unwrapType(zodType) {
+  let inner = zodType;
+  let required = true;
+  let defaultValue = void 0;
+  let description = zodType.description ?? "";
+  while (true) {
+    const typeName = resolveTypeName(inner);
+    if (typeName === "ZodOptional" || typeName === "ZodNullable") {
+      required = false;
+      inner = inner._def.innerType;
+    } else if (typeName === "ZodDefault") {
+      const raw = inner._def.defaultValue;
+      defaultValue = typeof raw === "function" ? raw() : raw;
+      inner = inner._def.innerType;
+    } else if (typeName === "ZodEffects") {
+      inner = inner._def.schema;
+    } else {
+      break;
+    }
+    if (!description && inner.description) {
+      description = inner.description;
+    }
+  }
+  return { inner, required, defaultValue, description };
+}
+function extractFieldMeta(key, zodType) {
+  const { inner, required, defaultValue, description } = unwrapType(zodType);
+  const typeName = resolveTypeName(inner);
+  let inputType;
+  let options = [];
+  let min;
+  let max;
+  let minLength;
+  let maxLength;
+  switch (typeName) {
+    case "ZodString": {
+      inputType = "text";
+      if (inner.format === "email") inputType = "email";
+      else if (inner.format === "url") inputType = "url";
+      if (inner.minLength != null) minLength = inner.minLength;
+      if (inner.maxLength != null) maxLength = inner.maxLength;
+      const checks = inner._def.checks ?? [];
+      for (const check of checks) {
+        const kind = check.kind ?? check.def?.check;
+        const fmt = check.format ?? check.def?.format;
+        if (!fmt && (kind === "email" || fmt === "email")) inputType = "email";
+        else if (!fmt && (kind === "url" || fmt === "url")) inputType = "url";
+        else if (fmt === "email" && inputType === "text") inputType = "email";
+        else if (fmt === "url" && inputType === "text") inputType = "url";
+        if (kind === "min" && check.value != null && minLength == null) minLength = check.value;
+        if (kind === "max" && check.value != null && maxLength == null) maxLength = check.value;
+      }
+      break;
+    }
+    case "ZodNumber": {
+      inputType = "number";
+      if (inner.minValue != null) min = inner.minValue;
+      if (inner.maxValue != null) max = inner.maxValue;
+      if (min == null || max == null) {
+        const checks = inner._def.checks ?? [];
+        for (const check of checks) {
+          if (check.kind === "min" && check.value != null && min == null) min = check.value;
+          if (check.kind === "max" && check.value != null && max == null) max = check.value;
+        }
+      }
+      break;
+    }
+    case "ZodBoolean":
+      inputType = "checkbox";
+      break;
+    case "ZodEnum": {
+      inputType = "select";
+      if (inner.options?.length) {
+        options = [...inner.options];
+      } else if (inner._def.entries) {
+        options = Object.values(inner._def.entries);
+      } else if (inner._def.values?.length) {
+        options = [...inner._def.values];
+      }
+      break;
+    }
+    case "ZodNativeEnum": {
+      inputType = "select";
+      const enumValues = inner._def.values;
+      if (enumValues) {
+        options = Object.values(enumValues).filter((v) => typeof v === "string");
+      }
+      break;
+    }
+    case "ZodDate":
+      inputType = "date";
+      break;
+    default:
+      return null;
+  }
+  const label = description || key;
+  return {
+    key,
+    inputType,
+    label,
+    description: description && description !== label ? description : "",
+    required,
+    options,
+    placeholder: "",
+    min,
+    max,
+    minLength,
+    maxLength,
+    defaultValue
+  };
+}
+function extractFormFields(schema) {
+  const shapeDef = schema._def.shape;
+  if (!shapeDef) return [];
+  const shape = typeof shapeDef === "function" ? shapeDef() : shapeDef;
+  if (!shape) return [];
+  const fields = [];
+  for (const [key, zodType] of Object.entries(shape)) {
+    const meta = extractFieldMeta(key, zodType);
+    if (meta) fields.push(meta);
+  }
+  return fields;
+}
+
 // src/controller.ts
 function normalizeItemInput(input) {
   return typeof input === "string" ? { key: input, label: input } : input;
 }
-var _state, _listeners, _resolver, _timerId, _DialogController_instances, emit_fn, update_fn, createPromise_fn, resolve_fn, clearTimer_fn, updateItemStatus_fn;
+var _state, _listeners, _resolver, _timerId, _formSchema, _formResult, _stepFormSchemas, _stepFormResults, _DialogController_instances, emit_fn, update_fn, validateFormField_fn, updateCurrentStep_fn, validateStepField_fn, createPromise_fn, resolve_fn, clearTimer_fn, updateItemStatus_fn;
 var DialogController = class {
   constructor() {
     __privateAdd(this, _DialogController_instances);
@@ -50,6 +212,10 @@ var DialogController = class {
     __privateAdd(this, _listeners, /* @__PURE__ */ new Set());
     __privateAdd(this, _resolver, null);
     __privateAdd(this, _timerId, null);
+    __privateAdd(this, _formSchema, null);
+    __privateAdd(this, _formResult, null);
+    __privateAdd(this, _stepFormSchemas, []);
+    __privateAdd(this, _stepFormResults, {});
     __privateSet(this, _state, createInitialState());
   }
   // ─── Observable ──────────────────────────────────────────
@@ -195,9 +361,202 @@ var DialogController = class {
   clearSteps() {
     __privateMethod(this, _DialogController_instances, update_fn).call(this, { steps: [] });
   }
+  // ─── Form ─────────────────────────────────────────────────
+  form(schema, options) {
+    __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    __privateSet(this, _formSchema, schema);
+    __privateSet(this, _formResult, null);
+    const fields = extractFormFields(schema);
+    const defaultValues = {};
+    for (const field of fields) {
+      if (field.defaultValue !== void 0) {
+        defaultValues[field.key] = field.defaultValue;
+      }
+    }
+    if (options?.defaultValues) {
+      Object.assign(defaultValues, options.defaultValues);
+    }
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, {
+      open: true,
+      dialogType: "form",
+      title: options?.title ?? "",
+      label: "",
+      description: options?.description ?? "",
+      icon: null,
+      showConfirmButton: true,
+      showCancelButton: true,
+      confirmButtonText: options?.confirmButtonText ?? "OK",
+      cancelButtonText: options?.cancelButtonText ?? "\u30AD\u30E3\u30F3\u30BB\u30EB",
+      allowOutsideClick: options?.allowOutsideClick ?? false,
+      allowEscapeKey: options?.allowEscapeKey ?? true,
+      progress: null,
+      timer: null,
+      formFields: fields,
+      formValues: defaultValues,
+      formErrors: {},
+      formTouched: {},
+      formLayout: options?.layout ?? {},
+      formValidateOnChange: options?.validateOnChange ?? true,
+      formValidateOnBlur: options?.validateOnBlur ?? true
+    });
+    return __privateMethod(this, _DialogController_instances, createPromise_fn).call(this, null).then((r) => {
+      const data = __privateGet(this, _formResult);
+      __privateSet(this, _formSchema, null);
+      __privateSet(this, _formResult, null);
+      return r.isConfirmed ? data : null;
+    });
+  }
+  updateFormField(key, value) {
+    const formValues = { ...__privateGet(this, _state).formValues, [key]: value };
+    const formTouched = { ...__privateGet(this, _state).formTouched, [key]: true };
+    let formErrors = { ...__privateGet(this, _state).formErrors };
+    if (__privateGet(this, _formSchema) && __privateGet(this, _state).formValidateOnChange) {
+      formErrors = __privateMethod(this, _DialogController_instances, validateFormField_fn).call(this, key, formValues, formErrors);
+    }
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { formValues, formTouched, formErrors });
+  }
+  touchFormField(key) {
+    const formTouched = { ...__privateGet(this, _state).formTouched, [key]: true };
+    let formErrors = { ...__privateGet(this, _state).formErrors };
+    if (__privateGet(this, _formSchema) && __privateGet(this, _state).formValidateOnBlur) {
+      formErrors = __privateMethod(this, _DialogController_instances, validateFormField_fn).call(this, key, __privateGet(this, _state).formValues, formErrors);
+    }
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { formTouched, formErrors });
+  }
+  // ─── Step Form ───────────────────────────────────────────
+  showStepForm(steps, options) {
+    __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    __privateSet(this, _stepFormSchemas, steps.map((s) => s.schema ?? null));
+    __privateSet(this, _stepFormResults, {});
+    const stepFormSteps = steps.map((s) => {
+      const fields = s.schema ? extractFormFields(s.schema) : [];
+      const values = {};
+      for (const f of fields) {
+        if (f.defaultValue !== void 0) values[f.key] = f.defaultValue;
+      }
+      if (s.defaultValues) Object.assign(values, s.defaultValues);
+      return {
+        key: s.key,
+        label: s.label,
+        description: s.description ?? "",
+        fields,
+        values,
+        errors: {},
+        touched: {},
+        layout: s.layout ?? {}
+      };
+    });
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, {
+      open: true,
+      dialogType: "step-form",
+      title: options?.title ?? "",
+      label: "",
+      description: "",
+      icon: null,
+      showConfirmButton: false,
+      showCancelButton: false,
+      allowOutsideClick: options?.allowOutsideClick ?? false,
+      allowEscapeKey: options?.allowEscapeKey ?? true,
+      progress: null,
+      timer: null,
+      stepFormSteps,
+      stepFormCurrentIndex: 0,
+      stepFormNextText: options?.nextButtonText ?? "\u6B21\u3078",
+      stepFormPrevText: options?.prevButtonText ?? "\u623B\u308B",
+      stepFormSubmitText: options?.submitButtonText ?? "OK",
+      cancelButtonText: options?.cancelButtonText ?? "\u30AD\u30E3\u30F3\u30BB\u30EB"
+    });
+    return __privateMethod(this, _DialogController_instances, createPromise_fn).call(this, null).then((r) => {
+      const data = __privateGet(this, _stepFormResults);
+      __privateSet(this, _stepFormSchemas, []);
+      __privateSet(this, _stepFormResults, {});
+      return r.isConfirmed ? data : null;
+    });
+  }
+  onStepNext() {
+    const s = __privateGet(this, _state);
+    const idx = s.stepFormCurrentIndex;
+    const step = s.stepFormSteps[idx];
+    if (!step) return;
+    const schema = __privateGet(this, _stepFormSchemas)[idx];
+    if (schema) {
+      const result = schema.safeParse(step.values);
+      if (!result.success) {
+        const errors = {};
+        for (const issue of result.error.issues) {
+          const key = issue.path[0]?.toString();
+          if (key && !errors[key]) errors[key] = issue.message;
+        }
+        const touched = {};
+        for (const f of step.fields) touched[f.key] = true;
+        __privateMethod(this, _DialogController_instances, updateCurrentStep_fn).call(this, { errors, touched });
+        return;
+      }
+      __privateGet(this, _stepFormResults)[step.key] = result.data;
+    }
+    const isLast = idx === s.stepFormSteps.length - 1;
+    if (isLast) {
+      const r = { isConfirmed: true, isCanceled: false, isDismissed: false };
+      __privateMethod(this, _DialogController_instances, update_fn).call(this, { ...createInitialState(), open: false });
+      __privateMethod(this, _DialogController_instances, resolve_fn).call(this, r);
+      return;
+    }
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { stepFormCurrentIndex: idx + 1 });
+  }
+  onStepPrev() {
+    const idx = __privateGet(this, _state).stepFormCurrentIndex;
+    if (idx <= 0) return;
+    __privateMethod(this, _DialogController_instances, update_fn).call(this, { stepFormCurrentIndex: idx - 1 });
+  }
+  updateStepFormField(fieldKey, value) {
+    const s = __privateGet(this, _state);
+    const idx = s.stepFormCurrentIndex;
+    const step = s.stepFormSteps[idx];
+    if (!step) return;
+    const values = { ...step.values, [fieldKey]: value };
+    const touched = { ...step.touched, [fieldKey]: true };
+    let errors = { ...step.errors };
+    const schema = __privateGet(this, _stepFormSchemas)[idx];
+    if (schema && s.formValidateOnChange) {
+      errors = __privateMethod(this, _DialogController_instances, validateStepField_fn).call(this, schema, fieldKey, values, errors);
+    }
+    __privateMethod(this, _DialogController_instances, updateCurrentStep_fn).call(this, { values, touched, errors });
+  }
+  touchStepFormField(fieldKey) {
+    const s = __privateGet(this, _state);
+    const idx = s.stepFormCurrentIndex;
+    const step = s.stepFormSteps[idx];
+    if (!step) return;
+    const touched = { ...step.touched, [fieldKey]: true };
+    let errors = { ...step.errors };
+    const schema = __privateGet(this, _stepFormSchemas)[idx];
+    if (schema && s.formValidateOnBlur) {
+      errors = __privateMethod(this, _DialogController_instances, validateStepField_fn).call(this, schema, fieldKey, step.values, errors);
+    }
+    __privateMethod(this, _DialogController_instances, updateCurrentStep_fn).call(this, { touched, errors });
+  }
   // ─── Button actions (called from the component) ──────────
   onConfirm() {
     __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
+    if (__privateGet(this, _state).dialogType === "form" && __privateGet(this, _formSchema)) {
+      const result = __privateGet(this, _formSchema).safeParse(__privateGet(this, _state).formValues);
+      if (!result.success) {
+        const formErrors = {};
+        for (const issue of result.error.issues) {
+          const key = issue.path[0]?.toString();
+          if (key && !formErrors[key]) {
+            formErrors[key] = issue.message;
+          }
+        }
+        const formTouched = {};
+        for (const field of __privateGet(this, _state).formFields) {
+          formTouched[field.key] = true;
+        }
+        __privateMethod(this, _DialogController_instances, update_fn).call(this, { formErrors, formTouched });
+        return;
+      }
+      __privateSet(this, _formResult, result.data);
+    }
     const r = { isConfirmed: true, isCanceled: false, isDismissed: false };
     __privateMethod(this, _DialogController_instances, update_fn).call(this, { ...createInitialState(), open: false });
     __privateMethod(this, _DialogController_instances, resolve_fn).call(this, r);
@@ -221,6 +580,10 @@ _state = new WeakMap();
 _listeners = new WeakMap();
 _resolver = new WeakMap();
 _timerId = new WeakMap();
+_formSchema = new WeakMap();
+_formResult = new WeakMap();
+_stepFormSchemas = new WeakMap();
+_stepFormResults = new WeakMap();
 _DialogController_instances = new WeakSet();
 emit_fn = function() {
   const snapshot = { ...__privateGet(this, _state) };
@@ -230,6 +593,47 @@ update_fn = function(patch) {
   Object.assign(__privateGet(this, _state), patch);
   __privateMethod(this, _DialogController_instances, emit_fn).call(this);
 };
+validateFormField_fn = function(key, values, errors) {
+  const result = __privateGet(this, _formSchema).safeParse(values);
+  const updated = { ...errors };
+  if (result.success) {
+    delete updated[key];
+  } else {
+    const fieldIssue = result.error.issues.find(
+      (issue) => issue.path[0]?.toString() === key
+    );
+    if (fieldIssue) {
+      updated[key] = fieldIssue.message;
+    } else {
+      delete updated[key];
+    }
+  }
+  return updated;
+};
+updateCurrentStep_fn = function(patch) {
+  const idx = __privateGet(this, _state).stepFormCurrentIndex;
+  const stepFormSteps = __privateGet(this, _state).stepFormSteps.map(
+    (st, i) => i === idx ? { ...st, ...patch } : st
+  );
+  __privateMethod(this, _DialogController_instances, update_fn).call(this, { stepFormSteps });
+};
+validateStepField_fn = function(schema, fieldKey, values, errors) {
+  const result = schema.safeParse(values);
+  const updated = { ...errors };
+  if (result.success) {
+    delete updated[fieldKey];
+  } else {
+    const issue = result.error.issues.find(
+      (iss) => iss.path[0]?.toString() === fieldKey
+    );
+    if (issue) {
+      updated[fieldKey] = issue.message;
+    } else {
+      delete updated[fieldKey];
+    }
+  }
+  return updated;
+};
 // ─── Internal ────────────────────────────────────────────
 createPromise_fn = function(timer) {
   return new Promise((resolve) => {
@@ -318,6 +722,24 @@ var overlayStyles = css`
     --dialog-spinner-track: rgb(59 130 246 / 0.2);
     --dialog-spinner-arc: var(--dialog-primary);
 
+    /* Form */
+    --dialog-form-width: 500px;
+    --dialog-form-max-height: 60vh;
+    --dialog-form-gap: 16px;
+    --dialog-form-columns: 1;
+    --dialog-form-label-color: #374151;
+    --dialog-form-label-size: 13px;
+    --dialog-form-label-weight: 500;
+    --dialog-form-input-bg: #fff;
+    --dialog-form-input-border: #d1d5db;
+    --dialog-form-input-border-focus: var(--dialog-primary);
+    --dialog-form-input-radius: 6px;
+    --dialog-form-input-padding: 8px 12px;
+    --dialog-form-input-font-size: 14px;
+    --dialog-form-error-color: var(--dialog-error);
+    --dialog-form-hint-color: #9ca3af;
+    --dialog-form-required-color: var(--dialog-error);
+
     display: contents;
     font-family: var(--dialog-font-family);
     color: var(--dialog-text-color);
@@ -469,8 +891,6 @@ var overlayStyles = css`
     }
   }
 
-  /* spin と spinner-enter は同じ transform を書き換えるため衝突する。
-     ラッパーでスケール/フェードを担い、.spinner は回転専用にする。 */
   .spinner-wrap {
     font-size: var(--dialog-spinner-size);
     width: 1em;
@@ -953,6 +1373,204 @@ var overlayStyles = css`
     background-color: #e5e7eb;
     transition: background-color 400ms ease;
   }
+
+  /* ─── Form ─── */
+
+  @media (min-width: 640px) {
+    .card[data-type='form'] {
+      width: var(--dialog-form-width);
+    }
+  }
+
+  .form-scroll-container {
+    max-height: var(--dialog-form-max-height);
+    overflow-y: auto;
+    width: 100%;
+    padding: 4px 0;
+  }
+
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--dialog-form-columns, 1), 1fr);
+    gap: var(--dialog-form-gap);
+    width: 100%;
+  }
+
+  @media (max-width: 639px) {
+    .form-grid {
+      grid-template-columns: 1fr !important;
+    }
+  }
+
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    text-align: left;
+  }
+
+  .form-field[data-type='checkbox'] {
+    grid-column: 1 / -1;
+  }
+
+  .form-label {
+    font-size: var(--dialog-form-label-size);
+    font-weight: var(--dialog-form-label-weight);
+    color: var(--dialog-form-label-color);
+  }
+
+  .form-required {
+    color: var(--dialog-form-required-color);
+    margin-left: 2px;
+  }
+
+  .form-input,
+  .form-select {
+    padding: var(--dialog-form-input-padding);
+    font-size: var(--dialog-form-input-font-size);
+    font-family: inherit;
+    background: var(--dialog-form-input-bg);
+    border: 1px solid var(--dialog-form-input-border);
+    border-radius: var(--dialog-form-input-radius);
+    color: var(--dialog-text-color);
+    outline: none;
+    transition:
+      border-color 150ms ease,
+      box-shadow 150ms ease;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .form-input:focus,
+  .form-select:focus {
+    border-color: var(--dialog-form-input-border-focus);
+    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
+  }
+
+  .form-field[data-error] .form-input,
+  .form-field[data-error] .form-select {
+    border-color: var(--dialog-form-error-color);
+  }
+
+  .form-field[data-error] .form-input:focus,
+  .form-field[data-error] .form-select:focus {
+    box-shadow: 0 0 0 3px rgb(239 68 68 / 0.1);
+  }
+
+  .form-error {
+    font-size: 12px;
+    color: var(--dialog-form-error-color);
+    min-height: 1em;
+  }
+
+  .form-hint {
+    font-size: 12px;
+    color: var(--dialog-form-hint-color);
+  }
+
+  .form-checkbox {
+    width: 18px;
+    height: 18px;
+    accent-color: var(--dialog-primary);
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .form-checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: var(--dialog-form-input-font-size);
+    color: var(--dialog-form-label-color);
+  }
+
+  .form-checkbox-text {
+    font-size: var(--dialog-form-label-size);
+    font-weight: var(--dialog-form-label-weight);
+    color: var(--dialog-form-label-color);
+  }
+
+  .form-group {
+    border: 1px solid var(--dialog-card-border);
+    border-radius: var(--dialog-form-input-radius);
+    padding: 16px;
+    margin: 0 0 8px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .form-group-label {
+    font-size: var(--dialog-form-label-size);
+    font-weight: 600;
+    color: var(--dialog-form-label-color);
+    padding: 0 4px;
+  }
+
+  /* ─── Step Form ─── */
+
+  @media (min-width: 640px) {
+    .card[data-type='step-form'] {
+      width: var(--dialog-form-width);
+    }
+  }
+
+  .step-form-counter {
+    font-size: 12px;
+    color: var(--dialog-form-hint-color);
+    text-align: center;
+    margin: 0 0 4px;
+  }
+
+  .actions-step-form {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    margin-top: 20px;
+    width: 100%;
+  }
+
+  .step-form-nav {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .btn-prev {
+    padding: var(--dialog-btn-padding);
+    font-size: var(--dialog-btn-font-size);
+    font-family: inherit;
+    font-weight: 500;
+    border-radius: var(--dialog-btn-radius);
+    cursor: pointer;
+    border: 1px solid var(--dialog-form-input-border);
+    background: transparent;
+    color: var(--dialog-text-color);
+    transition: background-color 120ms ease, border-color 120ms ease;
+  }
+
+  .btn-prev:hover {
+    background: #f9fafb;
+    border-color: #9ca3af;
+  }
+
+  .btn-prev:active {
+    transform: scale(0.98);
+  }
+
+  @media (max-width: 639px) {
+    .actions-step-form {
+      flex-direction: column-reverse;
+    }
+
+    .step-form-nav {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
 `;
 
 // src/overlay-dialog.ts
@@ -976,6 +1594,7 @@ var OverlayDialog = class extends LitElement {
       this._unsubscribe = this.controller.subscribe((s) => {
         const wasOpen = this._state.open;
         const prevDialogType = this._state.dialogType;
+        const prevStepIndex = this._state.stepFormCurrentIndex;
         if (s.open && !wasOpen) {
           this._isClosing = false;
           clearTimeout(this._closeTimer);
@@ -990,6 +1609,8 @@ var OverlayDialog = class extends LitElement {
         }
         if (s.open && s.dialogType !== prevDialogType) {
           this._bodyKey++;
+        } else if (s.open && s.dialogType === "step-form" && s.stepFormCurrentIndex !== prevStepIndex) {
+          this._bodyKey++;
         }
         this._state = s;
         this._syncBodyScroll(s.open);
@@ -1219,6 +1840,187 @@ var OverlayDialog = class extends LitElement {
       </ul>
     `;
   }
+  // ─── Form Helpers ────────────────────────────────────────
+  _createFormContext() {
+    const s = this._state;
+    return {
+      getValue: (k) => s.formValues[k],
+      getError: (k) => s.formErrors[k] ?? "",
+      getTouched: (k) => !!s.formTouched[k],
+      onUpdate: (k, v) => this.controller.updateFormField(k, v),
+      onBlur: (k) => this.controller.touchFormField(k)
+    };
+  }
+  _createStepFormContext() {
+    const s = this._state;
+    const step = s.stepFormSteps[s.stepFormCurrentIndex];
+    return {
+      getValue: (k) => step?.values[k],
+      getError: (k) => step?.errors[k] ?? "",
+      getTouched: (k) => !!step?.touched[k],
+      onUpdate: (k, v) => this.controller.updateStepFormField(k, v),
+      onBlur: (k) => this.controller.touchStepFormField(k)
+    };
+  }
+  _getOrderedFields(fields, layout) {
+    const order = layout.fieldOrder;
+    if (!order?.length) return fields;
+    const fieldMap = new Map(fields.map((f) => [f.key, f]));
+    const ordered = [];
+    for (const key of order) {
+      const f = fieldMap.get(key);
+      if (f) {
+        ordered.push(f);
+        fieldMap.delete(key);
+      }
+    }
+    for (const f of fieldMap.values()) {
+      ordered.push(f);
+    }
+    return ordered;
+  }
+  _renderFormGrid(fields, columns, gap, ctx) {
+    return html`
+      <div class="form-grid" style="--dialog-form-columns:${columns}; gap:${gap}">
+        ${fields.map((f) => this._renderFormField(f, ctx))}
+      </div>
+    `;
+  }
+  _renderGroupedForm(allFields, groups, layout, ctx) {
+    const fieldMap = new Map(allFields.map((f) => [f.key, f]));
+    const usedKeys = /* @__PURE__ */ new Set();
+    const gap = layout.gap ?? "16px";
+    const groupFragments = groups.map((group) => {
+      const groupFields = [];
+      for (const key of group.fields) {
+        const f = fieldMap.get(key);
+        if (f) {
+          groupFields.push(f);
+          usedKeys.add(key);
+        }
+      }
+      if (!groupFields.length) return nothing;
+      const cols = group.columns ?? layout.columns ?? 1;
+      return html`
+        <fieldset class="form-group">
+          ${group.label ? html`<legend class="form-group-label">${group.label}</legend>` : nothing}
+          ${this._renderFormGrid(groupFields, cols, gap, ctx)}
+        </fieldset>
+      `;
+    });
+    const remaining = allFields.filter((f) => !usedKeys.has(f.key));
+    return html`
+      ${groupFragments}
+      ${remaining.length ? this._renderFormGrid(remaining, layout.columns ?? 1, gap, ctx) : nothing}
+    `;
+  }
+  _renderForm(fields, layout, ctx) {
+    const ordered = this._getOrderedFields(fields, layout);
+    const gap = layout.gap ?? "16px";
+    if (layout.groups?.length) {
+      return this._renderGroupedForm(ordered, layout.groups, layout, ctx);
+    }
+    return this._renderFormGrid(ordered, layout.columns ?? 1, gap, ctx);
+  }
+  _renderFormField(field, ctx) {
+    const value = ctx.getValue(field.key);
+    const error = ctx.getError(field.key);
+    const touched = ctx.getTouched(field.key);
+    const showError = touched && !!error;
+    if (field.inputType === "checkbox") {
+      return html`
+        <div class="form-field" data-type="checkbox" ?data-error=${showError}>
+          <label class="form-checkbox-label">
+            <input
+              type="checkbox"
+              class="form-checkbox"
+              .checked=${!!value}
+              @change=${(e) => ctx.onUpdate(field.key, e.target.checked)}
+              @blur=${() => ctx.onBlur(field.key)}
+            />
+            <span class="form-checkbox-text">
+              ${field.label}
+              ${field.required ? html`<span class="form-required">*</span>` : nothing}
+            </span>
+          </label>
+          ${showError ? html`<span class="form-error">${error}</span>` : nothing}
+        </div>
+      `;
+    }
+    return html`
+      <div class="form-field" data-type=${field.inputType} ?data-error=${showError}>
+        <label class="form-label" for="form-${field.key}">
+          ${field.label} ${field.required ? html`<span class="form-required">*</span>` : nothing}
+        </label>
+        ${field.description ? html`<span class="form-hint">${field.description}</span>` : nothing}
+        ${this._renderFormInput(field, value, ctx)}
+        ${showError ? html`<span class="form-error">${error}</span>` : nothing}
+      </div>
+    `;
+  }
+  _renderFormInput(field, value, ctx) {
+    switch (field.inputType) {
+      case "select":
+        return html`
+          <select
+            class="form-select"
+            id="form-${field.key}"
+            @change=${(e) => ctx.onUpdate(field.key, e.target.value)}
+            @blur=${() => ctx.onBlur(field.key)}
+          >
+            <option value="" ?selected=${!value}>選択してください</option>
+            ${field.options.map(
+          (opt) => html`<option value=${opt} ?selected=${value === opt}>${opt}</option>`
+        )}
+          </select>
+        `;
+      case "number":
+        return html`
+          <input
+            type="number"
+            class="form-input"
+            id="form-${field.key}"
+            .value=${value != null ? String(value) : ""}
+            min=${field.min ?? nothing}
+            max=${field.max ?? nothing}
+            placeholder=${field.placeholder || nothing}
+            @input=${(e) => {
+          const v = e.target.valueAsNumber;
+          ctx.onUpdate(field.key, Number.isNaN(v) ? void 0 : v);
+        }}
+            @blur=${() => ctx.onBlur(field.key)}
+          />
+        `;
+      case "date":
+        return html`
+          <input
+            type="date"
+            class="form-input"
+            id="form-${field.key}"
+            .value=${value != null ? String(value) : ""}
+            @input=${(e) => {
+          const str = e.target.value;
+          ctx.onUpdate(field.key, str || void 0);
+        }}
+            @blur=${() => ctx.onBlur(field.key)}
+          />
+        `;
+      default:
+        return html`
+          <input
+            type=${field.inputType}
+            class="form-input"
+            id="form-${field.key}"
+            .value=${value ?? ""}
+            minlength=${field.minLength ?? nothing}
+            maxlength=${field.maxLength ?? nothing}
+            placeholder=${field.placeholder || nothing}
+            @input=${(e) => ctx.onUpdate(field.key, e.target.value)}
+            @blur=${() => ctx.onBlur(field.key)}
+          />
+        `;
+    }
+  }
   _renderButtons() {
     const s = this._state;
     if (!s.showConfirmButton && !s.showCancelButton) return nothing;
@@ -1233,6 +2035,39 @@ var OverlayDialog = class extends LitElement {
       </div>
     `;
   }
+  // ─── Step Form Helpers ───────────────────────────────────
+  _renderStepFormButtons() {
+    const s = this._state;
+    const isFirst = s.stepFormCurrentIndex === 0;
+    const isLast = s.stepFormCurrentIndex === s.stepFormSteps.length - 1;
+    const submitText = isLast ? s.stepFormSubmitText : s.stepFormNextText;
+    return html`
+      <div class="actions actions-step-form">
+        <button class="btn btn-cancel" @click=${() => this.controller.onCancel()}>
+          ${s.cancelButtonText}
+        </button>
+        <div class="step-form-nav">
+          ${isFirst ? nothing : html`
+                <button class="btn btn-prev" @click=${() => this.controller.onStepPrev()}>
+                  ${s.stepFormPrevText}
+                </button>
+              `}
+          <button class="btn btn-confirm" @click=${() => this.controller.onStepNext()}>
+            ${submitText}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  _deriveStepItems() {
+    const s = this._state;
+    return s.stepFormSteps.map((st, i) => {
+      let status = "pending";
+      if (i < s.stepFormCurrentIndex) status = "done";
+      else if (i === s.stepFormCurrentIndex) status = "active";
+      return { key: st.key, label: st.label, status };
+    });
+  }
   _renderBody() {
     const s = this._state;
     switch (s.dialogType) {
@@ -1259,16 +2094,47 @@ var OverlayDialog = class extends LitElement {
           ${s.label ? html`<p class="label">${s.label}</p>` : nothing}
           ${this._renderStepsList(s.steps)}
         `;
+      case "form": {
+        const ctx = this._createFormContext();
+        return html`
+          ${s.title ? html`<p class="label">${s.title}</p>` : nothing}
+          ${s.description ? html`<p class="description">${s.description}</p>` : nothing}
+          <div class="form-scroll-container">
+            ${this._renderForm(s.formFields, s.formLayout, ctx)}
+          </div>
+          ${this._renderButtons()}
+        `;
+      }
+      case "step-form": {
+        const stepItems = this._deriveStepItems();
+        const currentStep = s.stepFormSteps[s.stepFormCurrentIndex];
+        if (!currentStep) return html`${nothing}`;
+        const ctx = this._createStepFormContext();
+        const stepCount = s.stepFormSteps.length;
+        const counterText = `${s.stepFormCurrentIndex + 1} / ${stepCount}`;
+        return html`
+          ${this._renderStepsHeader(stepItems)}
+          <p class="step-form-counter">${counterText}</p>
+          <p class="label">${currentStep.label}</p>
+          ${currentStep.description ? html`<p class="description">${currentStep.description}</p>` : nothing}
+          ${currentStep.fields.length ? html`
+                <div class="form-scroll-container">
+                  ${this._renderForm(currentStep.fields, currentStep.layout, ctx)}
+                </div>
+              ` : nothing}
+          ${this._renderStepFormButtons()}
+        `;
+      }
       default:
         return html`${nothing}`;
     }
   }
   render() {
     const s = this._state;
-    const showHeaderTitle = s.title && s.dialogType !== "alert" && s.dialogType !== "confirm";
+    const showHeaderTitle = s.title && s.dialogType !== "alert" && s.dialogType !== "confirm" && s.dialogType !== "form" && s.dialogType !== "step-form";
     return html`
       <div class="backdrop" ?data-open=${s.open} @click=${this._onBackdropClick}>
-        <div class="card" ?data-closing=${this._isClosing}>
+        <div class="card" data-type=${s.dialogType} ?data-closing=${this._isClosing}>
           ${showHeaderTitle ? html`<p class="dialog-title">${s.title}</p>` : nothing}
           <div class="card-body">
             ${keyed(this._bodyKey, html`<div class="body-inner">${this._renderBody()}</div>`)}
@@ -1324,6 +2190,28 @@ var DialogSingleton = class {
     __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
     return __privateGet(this, _controller).confirm(optionsOrLabel);
   }
+  // ─── Form ──────────────────────────────────────────────────
+  form(schema, options) {
+    __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
+    return __privateGet(this, _controller).form(schema, options);
+  }
+  // ─── Step Form ─────────────────────────────────────────────
+  showStepForm(steps, options) {
+    __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
+    return __privateGet(this, _controller).showStepForm(steps, options);
+  }
+  onStepNext() {
+    __privateGet(this, _controller).onStepNext();
+  }
+  onStepPrev() {
+    __privateGet(this, _controller).onStepPrev();
+  }
+  updateStepFormField(fieldKey, value) {
+    __privateGet(this, _controller).updateStepFormField(fieldKey, value);
+  }
+  touchStepFormField(fieldKey) {
+    __privateGet(this, _controller).touchStepFormField(fieldKey);
+  }
   // ─── Loading helpers ─────────────────────────────────────
   showLoading(label) {
     __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
@@ -1404,9 +2292,908 @@ ensureElement_fn = function() {
   __privateSet(this, _element, el);
 };
 var dialog = new DialogSingleton();
+
+// src/toast/types.ts
+var createInitialToastState = () => ({
+  items: [],
+  position: "top-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
+import { LitElement as LitElement2, html as html2, nothing as nothing2 } from "lit";
+import { customElement as customElement2, property as property2, state as state2 } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+
+// src/toast/styles.ts
+import { css as css2 } from "lit";
+var toastStyles = css2`
+  :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 LitElement2 {
+  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 html2`<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 html2`<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 html2`<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 html2`<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 html2`
+          <div class="toast-spinner">
+            <div class="toast-spinner-half">
+              <div class="toast-spinner-inner"></div>
+            </div>
+          </div>
+        `;
+    }
+  }
+  // ─── Toast Rendering ────────────────────────────────────
+  _renderToast(item) {
+    return html2`
+      <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 ? html2`<p class="toast-description">${item.description}</p>` : nothing2}
+              ${item.action ? html2`<button
+                    class="toast-action-btn"
+                    @click=${() => {
+      item.action.onClick();
+      this.controller.dismiss(item.id);
+    }}
+                  >
+                    ${item.action.label}
+                  </button>` : nothing2}
+            </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" ? html2`<div
+                class="toast-progress"
+                style="animation-duration:${item.duration}ms"
+                data-type=${item.type}
+              ></div>` : nothing2}
+        </div>
+      </div>
+    `;
+  }
+  // ─── Main Render ────────────────────────────────────────
+  render() {
+    const s = this._state;
+    return html2`
+      <div class="container" data-position=${s.position} role="region" aria-label="通知">
+        ${repeat(
+      s.items,
+      (item) => item.id,
+      (item) => this._renderToast(item)
+    )}
+      </div>
+    `;
+  }
+};
+ToastContainer.styles = toastStyles;
+__decorateClass([
+  property2({ attribute: false })
+], ToastContainer.prototype, "controller", 2);
+__decorateClass([
+  state2()
+], ToastContainer.prototype, "_state", 2);
+ToastContainer = __decorateClass([
+  customElement2("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();
 export {
   DialogController,
   OverlayDialog,
-  dialog
+  ToastContainer,
+  ToastController,
+  dialog,
+  toast
 };
 //# sourceMappingURL=index.js.map