@mezzanine-stack/ui 0.1.0

package/Accordion.astro

@@ -0,0 +1,13 @@
+---
+/**
+ * Accordion
+ * props: { summary: string, open?: boolean, klass?: string }
+ */
+ const { summary, open = false, klass = "" } = Astro.props;
+---
+<details class={`mz-accordion ${klass}`.trim()} {...(open ? {open:true} : {})}>
+  <summary class="cluster" style="justify-content:space-between">
+    <span>{summary}</span><span aria-hidden="true">▾</span>
+  </summary>
+  <div class="stack"><slot /></div>
+</details>

package/Alert.astro

@@ -0,0 +1,17 @@
+---
+/**
+* Alert: 情報/成功/警告/危険
+* props: { variant?: 'info'|'success'|'warning'|'danger', title?: string, role?: 'status'|'alert', class?: string }
+*/
+const { variant = 'info', title, role = (variant === 'danger' ? 'alert' : 'status'), class: klass = '' } = Astro.props;
+const tone = {
+info: { bg: 'rgba(59,130,246,.10)', border: 'color-mix(in oklab, var(--color-primary) 45%, white)', fg: 'var(--color-fg)' },
+success:{ bg: 'rgba(22,163,74,.10)', border: 'rgba(22,163,74,.35)', fg: 'var(--color-fg)' },
+warning:{ bg: 'rgba(245,158,11,.12)', border: 'rgba(245,158,11,.35)', fg: 'var(--color-fg)' },
+danger: { bg: 'rgba(239,68,68,.12)', border: 'rgba(239,68,68,.35)', fg: 'var(--color-fg)' },
+}[variant];
+---
+<div role={role} class={`mz-card ${klass}`} style={`background:${tone.bg};border-color:${tone.border};`}>
+{title && <strong style="display:block;margin-bottom:8px">{title}</strong>}
+<div style={`color:${tone.fg}`}><slot /></div>
+</div>

package/Breadcrumbs.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * Breadcrumbs
+ * props:
+ *  - items: Array<{ label: string; href?: string }>
+ *    ※ 最後の要素が現ページ。href 省略 or undefined なら aria-current="page"
+ *  - klass?: string
+ */
+ const { items = [], klass = "" } = Astro.props;
+const lastIndex = Math.max(0, items.length - 1);
+---
+<nav aria-label="breadcrumb" class={`mz-breadcrumb ${klass}`.trim()}>
+  <ol>
+    {items.map((it: { href: string | URL | null | undefined; label: unknown; }, i: number) => {
+      const isCurrent = i === lastIndex || !it.href;
+      return (
+        <li>
+          {isCurrent ? (
+            <span aria-current="page">{it.label}</span>
+          ) : (
+            <a href={it.href}>{it.label}</a>
+          )}
+        </li>
+      );
+    })}
+  </ol>
+</nav>

package/Button.astro

@@ -0,0 +1,13 @@
+---
+const { href, variant = "default", ariaLabel, rel, target } = Astro.props;
+
+const cls = `mz-button ${variant === "primary" ? "primary" : ""}`;
+---
+
+{href ? ( 
+    <a class={cls} href={href} aria-label={ariaLabel} rel={rel} target={target}><slot /></a>
+) : 
+( 
+<button class={cls} type="button" aria-label={ariaLabel}><slot /></button> 
+)
+}

package/Card.astro

@@ -0,0 +1,11 @@
+---
+/**
+* Card: 汎用カードラッパ
+* props: { as?: 'article'|'section'|'div', class?: string }
+*/
+const { as = 'article', class: klass = '' } = Astro.props;
+const cls = `mz-card stack ${klass}`.trim();
+---
+{as === 'section' && (<section class={cls}><slot /></section>)}
+{as === 'div' && (<div class={cls}><slot /></div>)}
+{!['section','div'].includes(as) && (<article class={cls}><slot /></article>)}

package/Checkbox.astro

@@ -0,0 +1,11 @@
+---
+// Checkbox.astro
+/**
+ * props: { id: string, label?: string, checked?: boolean, required?: boolean, describedBy?: string, klass?: string }
+ */
+ const { id, label, checked = false, required = false, describedBy, klass = "" } = Astro.props;
+---
+<label class={`mz-check ${klass}`.trim()}>
+  <input id={id} type="checkbox" checked={checked} aria-describedby={describedBy} required={required} />
+  <span>{label}</span>
+</label>

package/Container.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * Container: 幅制御コンポーネント
+ * @param _props : { as?: "div" | "section" | "article" | "main" | "aside" | "header" | "footer" }
+ * @returns {JSX.Element}
+ */
+const { as = "div", class: klass = '' } = Astro.props;
+const classes = `mz-container ${klass}`.trim();
+---
+{as === 'section' && (<section class={classes}><slot /></section>)}
+{as === 'article' && (<article class={classes}><slot /></article>)}
+{as === 'main' && (<main class={classes}><slot /></main>)}
+{as === 'aside' && (<aside class={classes}><slot /></aside>)}
+{as === 'header' && (<header class={classes}><slot /></header>)}
+{as === 'footer' && (<footer class={classes}><slot /></footer>)}
+{as === 'div' && (<div class={classes}><slot /></div>)}

package/EmptyState.astro

@@ -0,0 +1,12 @@
+---
+/**
+ * EmptyState
+ * props: { title?: string, message?: string, ctaHref?: string, ctaLabel?: string, klass?: string }
+ */
+ const { title = "コンテンツがありません", message = "はじめての項目を作成しましょう。", ctaHref, ctaLabel = "作成する", klass = "" } = Astro.props;
+---
+<section class={`mz-card stack ${klass}`.trim()} style="text-align:center; padding: var(--space-8);">
+  <h3 style="margin:0">{title}</h3>
+  <p style="opacity:.8">{message}</p>
+  {ctaHref && <a class="mz-button primary" href={ctaHref}>{ctaLabel}</a>}
+</section>

package/Field.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * Field: ラベル/説明/エラーをまとめるラッパ
+ * props: { id: string, label?: string, help?: string, error?: string, required?: boolean, klass?: string }
+ */
+ const { id, label, help, error, required = false, klass = "" } = Astro.props;
+const helpId  = help  ? `${id}-help`  : undefined;
+const errorId = error ? `${id}-error` : undefined;
+---
+<div class={`mz-field stack ${klass}`.trim()}>
+  {label && (
+    <label for={id} class="mz-label">
+      {label}{required && <span aria-hidden="true" class="req">*</span>}
+    </label>
+  )}
+
+  <div class="mz-control">
+    <slot />
+  </div>
+
+  {help &&  <p id={helpId}  class="mz-help">{help}</p>}
+  {error && <p id={errorId} class="mz-error" role="alert">{error}</p>}
+</div>

package/Footer.astro

@@ -0,0 +1,20 @@
+---
+/**
+ * Footer
+ * props: { links?: Array<{label:string; href:string}>, note?: string, year?: number }
+ */
+ const { links = [], note = "", year = new Date().getFullYear() } = Astro.props;
+---
+<footer class="mz-footer">
+  <div class="container cluster" style="justify-content:space-between; align-items:center;">
+    <small>© {year} Mezzanine</small>
+    {note && <small style="opacity:.8">{note}</small>}
+    {links.length > 0 && (
+      <nav aria-label="Footer">
+        <ul class="cluster">
+          {links.map(l => <li><a href={l.href}>{l.label}</a></li>)}
+        </ul>
+      </nav>
+    )}
+  </div>
+</footer>

package/Header.astro

@@ -0,0 +1,39 @@
+---
+/**
+ * Header
+ * props:
+ *  - title: string       サイトタイトル
+ *  - href?: string       タイトルリンク先 (default="/")
+ *  - links?: Array<{ label: string; href: string }>
+ */
+const { title = "Mezzanine", href = "/", links = [] } = Astro.props;
+---
+<header class="mz-header">
+  <div class="mz-container cluster" style="justify-content:space-between; align-items:center;">
+    <!-- ブランド -->
+    <a href={href} class="mz-brand">{title}</a>
+
+    <!-- PCナビ -->
+    {links.length > 0 && (
+      <nav class="mz-nav" aria-label="Main navigation">
+        <ul class="cluster">
+          {links.map(link => (
+            <li><a href={link.href}>{link.label}</a></li>
+          ))}
+        </ul>
+      </nav>
+    )}
+
+    <!-- モバイルナビ -->
+    {links.length > 0 && (
+      <details class="mz-nav-mobile">
+        <summary aria-label="メニューを開く">☰</summary>
+        <ul class="stack">
+          {links.map(link => (
+            <li><a href={link.href}>{link.label}</a></li>
+          ))}
+        </ul>
+      </details>
+    )}
+  </div>
+</header>

package/Heading.astro

@@ -0,0 +1,21 @@
+---
+/**
+* Heading: レベルとサイズを分離
+* props: { level?: 1|2|3|4|5|6, size?: 'xs'|'sm'|'md'|'lg'|'xl', class?: string }
+*/
+const { level = 2, size = 'lg', class: klass = '' } = Astro.props;
+const sizeMap = {
+xs: 'var(--text-sm)',
+sm: 'var(--text-md)',
+md: 'var(--text-lg)',
+lg: 'var(--text-xl)',
+xl: 'clamp(24px, 1.6rem, 28px)'
+};
+const style = `margin:0;font-size:${sizeMap[size] ?? sizeMap.lg}`;
+---
+{level === 1 && (<h1 style={style} class={klass}><slot /></h1>)}
+{level === 2 && (<h2 style={style} class={klass}><slot /></h2>)}
+{level === 3 && (<h3 style={style} class={klass}><slot /></h3>)}
+{level === 4 && (<h4 style={style} class={klass}><slot /></h4>)}
+{level === 5 && (<h5 style={style} class={klass}><slot /></h5>)}
+{level === 6 && (<h6 style={style} class={klass}><slot /></h6>)}

package/Input.astro

@@ -0,0 +1,17 @@
+---
+/**
+ * Input: 単一行テキスト
+ * props: { id: string, type?: string, value?: string, placeholder?: string, invalid?: boolean, required?: boolean, describedBy?: string, klass?: string }
+ */
+ const { id, type = "text", value, placeholder, invalid = false, required = false, describedBy, klass = "" } = Astro.props;
+---
+<input
+  id={id}
+  class={`mz-input ${klass}`.trim()}
+  type={type}
+  value={value}
+  placeholder={placeholder}
+  aria-invalid={invalid ? "true" : "false"}
+  aria-describedby={describedBy}
+  required={required}
+/>

package/Modal.astro

@@ -0,0 +1,37 @@
+---
+/**
+ * Modal (dialog)
+ * props: { id: string, title?: string, interactive?: boolean, klass?: string }
+ * 使い方：
+ *  <Modal id="m1" title="設定" interactive>
+ *    <p>本文</p>
+ *  </Modal>
+ *  <a href="#m1" data-open="m1">開く</a>
+ */
+ const { id, title, interactive = false, klass = "" } = Astro.props;
+---
+<dialog id={id} class={`mz-modal ${klass}`.trim()} aria-labelledby={title ? `${id}-title` : undefined}>
+  <form method="dialog" class="stack">
+    {title && <h3 id={`${id}-title`} style="margin:0">{title}</h3>}
+    <slot />
+    <div class="cluster" style="justify-content:flex-end">
+      <button class="mz-button" value="cancel">閉じる</button>
+    </div>
+  </form>
+</dialog>
+
+{interactive && (
+  <script is:inline>
+    (() => {
+      const dlg = document.getElementById({id: JSON.stringify(id)});
+      if (!dlg) return;
+      document.addEventListener('click', (e) => {
+        const openBtn = e.target.closest('[data-open="{id}"]');
+        if (openBtn) { e.preventDefault(); dlg.showModal(); }
+      });
+      dlg.addEventListener('click', (e) => {
+        if (e.target === dlg) dlg.close(); // backdrop click
+      });
+    })();
+  </script>
+)}

package/Pagination.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Pagination（ページ番号内蔵）
+ * props:
+ *  - pages: { url: string; pageNumber: number }[]
+ *  - currentPage: number (現在のページ番号, 1始まり)
+ *  - prevLabel?: string
+ *  - nextLabel?: string
+ *  - klass?: string
+ */
+const {
+  pages = [],
+  currentPage = 1,
+  prevLabel = "Prev",
+  nextLabel = "Next",
+  klass = ""
+} = Astro.props;
+
+const currentIndex = pages.findIndex((p) => p.pageNumber === currentPage);
+const prev = currentIndex > 0 ? pages[currentIndex - 1] : undefined;
+const next = currentIndex >= 0 && currentIndex < pages.length - 1 ? pages[currentIndex + 1] : undefined;
+---
+<nav aria-label="pagination" class={`mz-pagination ${klass}`.trim()}>
+  <div class="container cluster" style="justify-content:space-between">
+    <div>
+      {prev ? (
+        <a class="mz-button" href={prev.url} rel="prev">← {prevLabel}</a>
+      ) : (
+        <span />
+      )}
+    </div>
+    <div class="cluster">
+      {pages.map((p) =>
+        p.pageNumber === currentPage ? (
+          <span class="mz-button" aria-current="page">{p.pageNumber}</span>
+        ) : (
+          <a href={p.url} class="mz-button">{p.pageNumber}</a>
+        )
+      )}
+    </div>
+    <div>
+      {next ? (
+        <a class="mz-button" href={next.url} rel="next">{nextLabel} →</a>
+      ) : (
+        <span />
+      )}
+    </div>
+  </div>
+</nav>

package/README.md

@@ -0,0 +1,31 @@
+# @mezzanine-stack/ui
+
+Astro ベースの共通 UI コンポーネント群です。見た目の基盤は `@mezzanine-stack/tokens` と `@mezzanine-stack/css` に依存します。
+
+## 設計方針
+
+- Astro コンポーネントを package exports で直接公開
+- デザイントークンと共通 CSS を前提に、アプリ側で組み合わせて利用
+- `astro` は `peerDependencies` としてホストアプリ側で解決
+
+## 主なコンポーネント
+
+- レイアウト: `Container`, `Section`, `Header`, `Footer`
+- フォーム: `Field`, `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`
+- ナビゲーション: `Breadcrumbs`, `Pagination`, `Tabs`
+- フィードバック: `Alert`, `EmptyState`, `Toaster`, `Modal`, `Tooltip`
+- 表示: `Heading`, `Text`, `Tag`, `Card`, `Table`, `Accordion`, `Button`
+
+## 利用例
+
+```astro
+---
+import Container from "@mezzanine-stack/ui/Container.astro";
+import Heading from "@mezzanine-stack/ui/Heading.astro";
+---
+
+<Container>
+  <Heading level={2}>Hello</Heading>
+</Container>
+```
+

package/Radio.astro

@@ -0,0 +1,11 @@
+---
+// Radio.astro
+/**
+ * props: { id: string, name: string, label?: string, checked?: boolean, required?: boolean, describedBy?: string, klass?: string }
+ */
+ const { id, name, label, checked = false, required = false, describedBy, klass = "" } = Astro.props;
+---
+<label class={`mz-radio ${klass}`.trim()}>
+  <input id={id} name={name} type="radio" checked={checked} aria-describedby={describedBy} required={required} />
+  <span>{label}</span>
+</label>

package/Section.astro

@@ -0,0 +1,16 @@
+---
+/**
+* Section: セクション余白＋見出し（任意）
+* props: { title?: string, lead?: string, id?: string, padded?: boolean, class?: string }
+*/
+const { title, lead, id, padded = true, class: klass = '' } = Astro.props;
+---
+<section id={id} class={`mz-stack ${padded ? '' : ''} ${klass}`.trim()} style={padded ? undefined : 'margin-top:0'}>
+{title && (
+<header class="mz-stack">
+    <h2 style="margin:0;font-size:var(--text-xl)">{title}</h2>
+    {lead && <p style="opacity:.8">{lead}</p>}
+</header>
+)}
+<slot />
+</section>

package/Select.astro

@@ -0,0 +1,18 @@
+---
+/**
+ * Select
+ * props: { id: string, options: Array<{label:string; value:string}>, value?: string, placeholder?: string, invalid?: boolean, required?: boolean, describedBy?: string, klass?: string }
+ */
+ const { id, options = [], value, placeholder, invalid = false, required = false, describedBy, klass = "" } = Astro.props;
+---
+<select
+  id={id}
+  class={`mz-select ${klass}`.trim()}
+  value={value}
+  aria-invalid={invalid ? "true" : "false"}
+  aria-describedby={describedBy}
+  required={required}
+>
+  {placeholder && <option value="" disabled selected={!value}>{placeholder}</option>}
+  {options.map(opt => <option value={opt.value} selected={value === opt.value}>{opt.label}</option>)}
+</select>

package/Table.astro

@@ -0,0 +1,34 @@
+---
+/**
+ * Table
+ * props: {
+ *  caption?: string;
+ *  headers?: string[];                 // thead のテキスト（簡易）
+ *  dense?: boolean;                    // 余白を詰める
+ *  zebra?: boolean;                    // 交互色
+ *  klass?: string;
+ * }
+ * 使い方:
+ *  <Table headers={["Title","Date","Tags"]}>
+ *    <Fragment slot="body">
+ *      <tr><td>Post A</td><td>2025/09/01</td><td>news</td></tr>
+ *    </Fragment>
+ *  </Table>
+ */
+ const { caption, headers = [], dense = false, zebra = false, klass = "" } = Astro.props;
+---
+<div class={`table-scroll ${klass}`.trim()}>
+  <table class={`mz-table ${dense ? "dense" : ""} ${zebra ? "zebra" : ""}`.trim()}>
+    {caption && <caption>{caption}</caption>}
+    {headers.length > 0 && (
+      <thead>
+        <tr>
+          {headers.map(h => <th scope="col">{h}</th>)}
+        </tr>
+      </thead>
+    )}
+    <tbody>
+      <slot name="body" />
+    </tbody>
+  </table>
+</div>

package/Tabs.astro

@@ -0,0 +1,101 @@
+---
+/**
+ * Tabs (progressive enhanced)
+ * props:
+ *  - tabs: Array<{ id: string; label: string }>
+ *  - interactive?: boolean  // デフォ false。true で薄JSを有効化
+ */
+const { tabs = [], interactive = false } = Astro.props;
+const firstId = tabs[0]?.id;
+---
+<div class="mz-tabs" data-tabs {...(interactive ? {'data-interactive': 'true'} : {})}>
+  <nav class="mz-tablist" role="tablist" aria-label="Tabs">
+    <ul class="cluster">
+      {tabs.map((t, i) => (
+        <li>
+          <a
+            id={`${t.id}-tab`}
+            role="tab"
+            href={`#${t.id}`}
+            aria-controls={t.id}
+            aria-selected={i === 0 ? "true" : "false"}   
+            tabindex={i === 0 ? "0" : "-1"}               
+          >{t.label}</a>
+        </li>
+      ))}
+    </ul>
+  </nav>
+
+  <div class="mz-tabpanels">
+    <slot />
+  </div>
+</div>
+
+{interactive && (
+  <script is:inline>
+    // 極小強化スクリプト（約1KB）
+    (() => {
+      const root = document.currentScript?.previousElementSibling;
+      if (!root || !root.matches('[data-tabs][data-interactive]')) return;
+
+      const tabs = Array.from(root.querySelectorAll('[role="tab"]'));
+      const panels = Array.from(root.querySelectorAll('.mz-tabpanels > *'));
+
+      const byHash = () => {
+        const id = location.hash?.slice(1);
+        if (!id) return null;
+        const tab = tabs.find(t => t.getAttribute('aria-controls') === id);
+        const panel = panels.find(p => p.id === id);
+        return tab && panel ? { tab, panel } : null;
+      };
+
+      const activate = (tabEl) => {
+        const id = tabEl.getAttribute('aria-controls');
+        const panelEl = root.querySelector(`#${CSS.escape(id)}`);
+        if (!panelEl) return;
+
+        tabs.forEach(t => { t.setAttribute('aria-selected','false'); t.setAttribute('tabindex','-1'); });
+        panels.forEach(p => p.hidden = true);
+
+        tabEl.setAttribute('aria-selected','true');
+        tabEl.setAttribute('tabindex','0');
+        panelEl.hidden = false;
+      };
+
+      // 初期：ハッシュ優先→なければ先頭
+      const initial = byHash();
+      activate(initial?.tab ?? tabs[0]);
+
+      // クリックで切替（ハッシュ書き換えで共有可能）
+      root.addEventListener('click', (e) => {
+        const a = e.target.closest('[role="tab"]');
+        if (!a) return;
+        activate(a);
+      });
+
+      // キーボード（左右で移動）
+      root.addEventListener('keydown', (e) => {
+        const currentIdx = tabs.findIndex(t => t.getAttribute('aria-selected') === 'true');
+        if (currentIdx < 0) return;
+        let nextIdx = currentIdx;
+        if (e.key === 'ArrowRight') nextIdx = (currentIdx + 1) % tabs.length;
+        if (e.key === 'ArrowLeft')  nextIdx = (currentIdx - 1 + tabs.length) % tabs.length;
+        if (nextIdx !== currentIdx) {
+          e.preventDefault();
+          const next = tabs[nextIdx];
+          next.focus();
+          activate(next);
+          // ハッシュも同期
+          const id = next.getAttribute('aria-controls');
+          history.replaceState(null, '', `#${id}`);
+        }
+      });
+
+      // ハッシュ変化にも追従（外部リンクからの遷移など）
+      window.addEventListener('hashchange', () => {
+        const pair = byHash();
+        if (pair) activate(pair.tab);
+      });
+    })();
+  </script>
+)}

package/Tag.astro

@@ -0,0 +1,13 @@
+---
+/**
+* Tag: ラベル・ステータス表示
+* props: { as?: 'span'|'a', href?: string, class?: string }
+*/
+const { as = 'span', href = '#', class: klass = '' } = Astro.props;
+const cls = `mz-tag ${klass}`.trim();
+---
+{as === 'a' ? (
+<a class={cls} href={href}><slot /></a>
+) : (
+<span class={cls}><slot /></span>
+)}

package/Text.astro

@@ -0,0 +1,12 @@
+---
+/**
+* Text: 本文・補足テキスト
+* props: { as?: 'p'|'span'|'small', muted?: boolean, size?: 'sm'|'md'|'lg', class?: string }
+*/
+const { as = 'p', muted = false, size = 'md', class: klass = '' } = Astro.props;
+const sizeMap = { sm: 'var(--text-sm)', md: 'var(--text-md)', lg: 'var(--text-lg)' };
+const style = `font-size:${sizeMap[size] ?? sizeMap.md};${muted ? 'opacity:.8' : ''}`;
+---
+{as === 'span' && (<span style={style} class={klass}><slot /></span>)}
+{as === 'small' && (<small style={style} class={klass}><slot /></small>)}
+{!['span','small'].includes(as) && (<p style={style} class={klass}><slot /></p>)}

package/Textarea.astro

@@ -0,0 +1,31 @@
+---
+/**
+ * Textarea
+ * props: {
+ *  id: string, rows?: number, value?: string,
+ *  placeholder?: string, invalid?: boolean, required?: boolean,
+ *  describedBy?: string, klass?: string
+ * }
+ */
+ const {
+  id,
+  rows = 4,
+  value,
+  placeholder,
+  invalid = false,
+  required = false,
+  describedBy,
+  klass = "",
+} = Astro.props;
+
+const textValue = (value ?? "").toString();
+---
+<textarea
+  id={id}
+  class={`mz-textarea ${klass}`.trim()}
+  rows={rows}
+  placeholder={placeholder}
+  aria-invalid={invalid ? "true" : "false"}
+  aria-describedby={describedBy}
+  required={required}
+>{textValue}</textarea>

package/Toaster.astro

@@ -0,0 +1,85 @@
+---
+/**
+ * Toaster: 画面端にトーストを積む受け皿（1ページ1回だけ設置）
+ * props:
+ *  - position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' (default: 'bottom-right')
+ *  - max?: number  // 同時表示上限（default: 4）
+ *  - interactive?: boolean // falseでも静的DOMとしては描画される
+ */
+ const { position = "bottom-right", max = 4, interactive = true } = Astro.props;
+---
+<div
+  id="mz-toaster"
+  class={`mz-toaster ${position}`}
+  aria-live="polite"
+  aria-atomic="true"
+  data-max={max}
+></div>
+
+{interactive && (
+  <script is:inline>
+  (() => {
+    const host = document.getElementById('mz-toaster');
+    if (!host) return;
+
+    const MAX = Number(host.dataset.max || 4);
+
+    // 上限超過を同期的に整理（アニメ無しで即 remove）
+    const trim = () => {
+      while (host.children.length > MAX - 1) {
+        host.firstElementChild?.remove();
+      }
+    };
+
+    // 公開 API
+    window.mzToast = function(message, opts) {
+      opts = opts || {};
+      const variant     = opts.variant || 'info';
+      const duration    = Number(opts.duration ?? 3500);
+      const dismissible = opts.dismissible !== false;
+      const title       = opts.title || '';
+
+      // まず整理（ハング回避の肝）
+      trim();
+
+      const el = document.createElement('div');
+      el.className = `mz-toast ${variant}`;
+      el.setAttribute('role', 'status');
+      el.setAttribute('tabindex', '0');
+      el.innerHTML = `
+        <div class="mz-toast-body">
+          ${title ? `<strong class="mz-toast-title">${title}</strong>` : ''}
+          <div class="mz-toast-message"></div>
+        </div>
+        ${dismissible ? `<button type="button" class="mz-toast-close" aria-label="閉じる">×</button>` : ''}
+      `;
+      el.querySelector('.mz-toast-message').textContent = message;
+
+      // 二重クローズ防止
+      let closed = false;
+      const forceRemove = () => { if (closed) return; closed = true; el.remove(); };
+      const animateOut  = () => {
+        if (closed) return;
+        closed = true;
+        el.classList.add('leaving');
+        el.addEventListener('animationend', () => el.remove(), { once: true });
+      };
+
+      // 追加 & 自動クローズ
+      host.appendChild(el);
+      if (opts.focus) el.focus();
+      if (duration > 0) {
+        setTimeout(animateOut, duration);
+      }
+
+      // 操作で閉じる
+      el.addEventListener('click', (e) => {
+        if (e.target.closest('.mz-toast-close')) animateOut();
+      });
+      el.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') animateOut();
+      });
+    };
+  })();
+</script>
+)}

package/Tooltip.astro

@@ -0,0 +1,11 @@
+---
+/**
+ * Tooltip (CSS only)
+ * props: { text: string, position?: 'top'|'right'|'bottom'|'left', klass?: string }
+ * ※ フォーカスでも出るように button/a などフォーカス可能要素で包むと良い
+ */
+ const { text, position = "top", klass = "" } = Astro.props;
+---
+<span class={`mz-tooltip ${position} ${klass}`.trim()} aria-label={text}>
+  <slot />
+</span>

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@mezzanine-stack/ui",
+  "version": "0.1.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "files": [
+    "*.astro"
+  ],
+  "exports": {
+    "./Accordion.astro": "./Accordion.astro",
+    "./Alert.astro": "./Alert.astro",
+    "./Breadcrumbs.astro": "./Breadcrumbs.astro",
+    "./Button.astro": "./Button.astro",
+    "./Card.astro": "./Card.astro",
+    "./Checkbox.astro": "./Checkbox.astro",
+    "./Container.astro": "./Container.astro",
+    "./EmptyState.astro": "./EmptyState.astro",
+    "./Field.astro": "./Field.astro",
+    "./Footer.astro": "./Footer.astro",
+    "./Header.astro": "./Header.astro",
+    "./Heading.astro": "./Heading.astro",
+    "./Input.astro": "./Input.astro",
+    "./Modal.astro": "./Modal.astro",
+    "./Pagination.astro": "./Pagination.astro",
+    "./Radio.astro": "./Radio.astro",
+    "./Section.astro": "./Section.astro",
+    "./Select.astro": "./Select.astro",
+    "./Table.astro": "./Table.astro",
+    "./Tabs.astro": "./Tabs.astro",
+    "./Tag.astro": "./Tag.astro",
+    "./Text.astro": "./Text.astro",
+    "./Textarea.astro": "./Textarea.astro",
+    "./Toaster.astro": "./Toaster.astro",
+    "./Tooltip.astro": "./Tooltip.astro"
+  },
+  "peerDependencies": {
+    "astro": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@mezzanine-stack/tokens": "0.1.0",
+    "@mezzanine-stack/css": "0.1.0"
+  }
+}