npm - @adia-ai/web-components - Versions diffs - 0.8.6 → 0.8.8 - Mend

@adia-ai/web-components 0.8.6 → 0.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/patterns/bulk-action-toolbar/bulk-action-toolbar.html ADDED Viewed

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Bulk Action Toolbar (pattern) — AdiaUI</title>
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/code/code.css">
+  <link rel="stylesheet" href="../../components/divider/divider.css">
+  <link rel="stylesheet" href="../../components/table/table.css">
+  <link rel="stylesheet" href="../../components/table-toolbar/table-toolbar.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <link rel="stylesheet" href="../../components/toolbar/toolbar.css">
+  <!-- Component JS -->
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/code/code.js"></script>
+  <script type="module" src="../../components/divider/divider.js"></script>
+  <script type="module" src="../../components/table/table.js"></script>
+  <script type="module" src="../../components/table-toolbar/table-toolbar.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <script type="module" src="../../components/toolbar/toolbar.js"></script>
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./bulk-action-toolbar.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+      try {
+        const mod = await import(/* @vite-ignore */ './bulk-action-toolbar.examples.js');
+        mod.default?.(root);
+      } catch (e) { console.error('[bulk-action-toolbar.html] setup failed:', e); }
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load bulk-action-toolbar.examples.html — ${err.message}</p>`;
+      console.error('[bulk-action-toolbar.html]', err);
+    }
+  </script>
+</body>
+</html>

package/patterns/changelog-feed/changelog-feed.examples.html ADDED Viewed

@@ -0,0 +1,151 @@
+<header>
+  <div>
+    <h1>Changelog feed</h1>
+    <div data-actions>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">list-ui</tag-ui> <tag-ui size="sm">heading-ui</tag-ui>
+    </div>
+  </div>
+  <p>"What's new" in-app surface for product updates. Each release entry carries a version + date header, Added / Changed / Fixed / Deprecated section tags following <a href="https://keepachangelog.com/en/1.1.0/">Keep-a-Changelog</a>, and the bulleted change list. Use in admin-shell sidebars (the Changelog nav item), settings pages, or a dedicated /changelog route.</p>
+</header>
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>Recurring product announcements where users care about the cumulative trail (engineers, power users, paid tiers). Distinct from <a href="/site/components/toast">toast-ui</a> (single ephemeral notification), <a href="/site/components/feed">feed-ui</a> (top-layer notification queue), and <a href="/site/components/timeline">timeline-ui</a> (single-actor narrative). Composed inline; not a routed page — consumers choose the surface (drawer, sidebar, settings tab).</p>
+</section>
+<section data-section data-property="basic">
+  <h2 variant="section">Basic — three releases</h2>
+  <p data-note>Section-grouped layout (GitHub / Linear convention): each release carries a version + date header, then per-section eyebrows (Added / Changed / Fixed / Deprecated / Removed) followed by bulleted prose. Sections are <em>grouped</em>, not tagged per row — variable tag widths break left-edge alignment of prose; eyebrow + bullets keep one consistent reading column.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="changelog feed — 3 releases">
+      <card-ui data-chunk="changelog-feed-basic" style="max-width: 640px;">
+        <header>
+          <span slot="heading" variant="section">What's new</span>
+          <text-ui slot="description" color="subtle">3 releases in the last 30 days</text-ui>
+        </header>
+        <section>
+          <col-ui gap="6">
+            <!-- Release: v2.3.0 -->
+            <col-ui gap="4" data-release="v2.3.0">
+              <row-ui gap="2" align="baseline" justify="between">
+                <row-ui gap="2" align="baseline">
+                  <text-ui strong size="lg">v2.3.0</text-ui>
+                  <tag-ui size="sm" variant="primary">Latest</tag-ui>
+                </row-ui>
+                <text-ui color="subtle" size="sm">March 12, 2026</text-ui>
+              </row-ui>
+              <col-ui gap="2" data-section="added">
+                <text-ui variant="kicker" color="primary">Added</text-ui>
+                <ul class="changelog-bullets">
+                  <li>Bulk-edit mode for the data-table — multi-select rows, then update column values in one pass.</li>
+                  <li>CSV export now respects the visible-columns filter.</li>
+                </ul>
+              </col-ui>
+              <col-ui gap="2" data-section="fixed">
+                <text-ui variant="kicker" color="success">Fixed</text-ui>
+                <ul class="changelog-bullets">
+                  <li>Resolved a sort-stability bug when two rows had identical sort keys.</li>
+                </ul>
+              </col-ui>
+            </col-ui>
+            <divider-ui></divider-ui>
+            <!-- Release: v2.2.1 -->
+            <col-ui gap="4" data-release="v2.2.1">
+              <row-ui gap="2" align="baseline" justify="between">
+                <text-ui strong size="lg">v2.2.1</text-ui>
+                <text-ui color="subtle" size="sm">March 5, 2026</text-ui>
+              </row-ui>
+              <col-ui gap="2" data-section="fixed">
+                <text-ui variant="kicker" color="success">Fixed</text-ui>
+                <ul class="changelog-bullets">
+                  <li>API rate-limit headers (<code>X-RateLimit-*</code>) now surface in client SDKs.</li>
+                  <li>Date-range picker no longer resets to today when reopening with a saved selection.</li>
+                </ul>
+              </col-ui>
+            </col-ui>
+            <divider-ui></divider-ui>
+            <!-- Release: v2.2.0 -->
+            <col-ui gap="4" data-release="v2.2.0">
+              <row-ui gap="2" align="baseline" justify="between">
+                <text-ui strong size="lg">v2.2.0</text-ui>
+                <text-ui color="subtle" size="sm">February 26, 2026</text-ui>
+              </row-ui>
+              <col-ui gap="2" data-section="added">
+                <text-ui variant="kicker" color="primary">Added</text-ui>
+                <ul class="changelog-bullets">
+                  <li>Workspace-level audit log — see who did what across all members.</li>
+                </ul>
+              </col-ui>
+              <col-ui gap="2" data-section="changed">
+                <text-ui variant="kicker">Changed</text-ui>
+                <ul class="changelog-bullets">
+                  <li>Toast notifications gained an <code>Undo</code> affordance for destructive actions.</li>
+                </ul>
+              </col-ui>
+              <col-ui gap="2" data-section="deprecated">
+                <text-ui variant="kicker" color="warning">Deprecated</text-ui>
+                <ul class="changelog-bullets">
+                  <li>Legacy <code>/v1/export</code> endpoint will be removed in v3.0. Migrate to <code>/v2/jobs/export</code>.</li>
+                </ul>
+              </col-ui>
+            </col-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <text-ui color="subtle" size="sm">Showing 3 of 47 releases</text-ui>
+          <row-ui slot="action" gap="2">
+            <button-ui text="View all releases" variant="ghost" size="sm" icon-trailing="arrow-up-right"></button-ui>
+          </row-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+  <style>
+    /* Section-grouped bullets — tight leading + small disc indent so the
+       text column reads as a single visual stack under each eyebrow. */
+    .changelog-bullets {
+      margin: 0;
+      padding-inline-start: 1.25rem;
+      list-style: disc;
+      color: var(--md-sys-color-neutral-on-surface);
+    }
+    .changelog-bullets li {
+      padding-block: 0.125rem;
+      line-height: var(--a-line-height-relaxed, 1.55);
+    }
+  </style>
+</section>
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>Newest first</strong> — top-down chronological. The most recent release is the first the user sees; load-older appends below.</li>
+    <li><strong>Latest tag on the newest entry</strong> — a <code>variant="primary"</code> "Latest" tag next to the top version disambiguates which is the current shipping release.</li>
+    <li><strong>Date in subtle text</strong> — date sits in <code>color="subtle"</code> typography to the right of the version; never the primary read. Absolute date (March 12, 2026) — never relative for a permanent changelog.</li>
+    <li><strong>Group by section, don't tag per row</strong> — Keep-a-Changelog sections (Added / Changed / Fixed / Deprecated / Removed / Security) are eyebrow labels above bulleted prose, not per-row tag pills. Variable tag widths (Added 3-letter, Deprecated 9-letter) break left-edge alignment; eyebrow headers keep one consistent reading column.</li>
+    <li><strong>Eyebrow color encodes severity</strong> — Added (primary), Fixed (success), Deprecated (warning), Removed/Security (danger). Changed uses the default fg. Same vocabulary every release.</li>
+    <li><strong>Bullets stay tight</strong> — one sentence per change, code spans for endpoints / config keys. If a change needs three paragraphs, link out to a docs page; the changelog is a scan surface.</li>
+    <li><strong>Footer affordance is "View all", not pagination</strong> — most users don't want page 47. Link to a dedicated /releases route; advanced users follow.</li>
+  </ul>
+</section>
+<section data-section data-property="cross-references">
+  <h2 variant="section">Cross-references</h2>
+  <ul>
+    <li><a href="/site/components/card">card-ui</a> · <a href="/site/components/tag">tag-ui</a> · <a href="/site/components/list">list-ui</a> · <a href="/site/components/divider">divider-ui</a> — primitives composed here.</li>
+    <li><a href="/site/patterns/admin-shell">admin-shell</a> — common surface for the Changelog nav item; this pattern slots into a sidebar drawer or settings tab.</li>
+    <li><a href="https://keepachangelog.com/en/1.1.0/">Keep-a-Changelog spec</a> — section-tag vocabulary source.</li>
+  </ul>
+</section>

package/patterns/changelog-feed/changelog-feed.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Changelog feed (pattern) — AdiaUI</title>
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/divider/divider.css">
+  <link rel="stylesheet" href="../../components/heading/heading.css">
+  <link rel="stylesheet" href="../../components/icon/icon.css">
+  <link rel="stylesheet" href="../../components/list/list.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/divider/divider.js"></script>
+  <script type="module" src="../../components/heading/heading.js"></script>
+  <script type="module" src="../../components/icon/icon.js"></script>
+  <script type="module" src="../../components/list/list.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./changelog-feed.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load changelog-feed.examples.html — ${err.message}</p>`;
+      console.error('[changelog-feed.html]', err);
+    }
+  </script>
+</body>
+</html>

package/patterns/chart-in-card/chart-in-card.examples.html ADDED Viewed

@@ -0,0 +1,193 @@
+<header>
+  <div>
+    <h1>Chart in Card</h1>
+    <div data-actions>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">chart-ui</tag-ui> <tag-ui size="sm">stat-ui</tag-ui>
+    </div>
+  </div>
+  <p>Composition pattern: embed a chart inside a card so the chart reads as a dashboard tile, not as raw data. Header communicates the metric in words; chart shows the shape; footer adds context.</p>
+</header>
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    Naked charts are rare in dashboards — they almost always sit inside a card that
+    supplies the metric name, current value, and a verbal summary. Prefer this pattern
+    whenever a chart is the primary content of a card, regardless of chart type.
+  </p>
+</section>
+<section data-section data-property="sparkline-tile">
+  <h2 variant="section">Sparkline tile</h2>
+  <p data-note>KPI + trend shape. Used in overview rows to show 4–6 metrics side-by-side.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="sparkline tile">
+      <card-ui data-chunk="chart-in-card-sparkline-tile" style="max-width:320px;">
+        <header>
+          <span slot="heading"><h2>Page Views</h2></span>
+          <text-ui slot="description" variant="title">84,232</text-ui>
+        </header>
+        <section bleed>
+          <chart-ui id="pat-spark-views" type="sparkline" x="d" y="v"></chart-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="full-chart">
+  <h2 variant="section">Full chart with framing</h2>
+  <p data-note>Chart as primary content. Header names the metric; footer adds a supporting action.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="full chart">
+      <card-ui data-chunk="chart-in-card-full-chart" style="max-width:520px;">
+        <header>
+          <span slot="heading"><h3>Revenue</h3></span>
+          <text-ui slot="description" color="subtle">Last 12 months</text-ui>
+        </header>
+        <section>
+          <chart-ui id="pat-revenue" type="bar" x="month" y="revenue" hide-values></chart-ui>
+        </section>
+        <footer>
+          <button-ui text="View report" variant="outline" stretch></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="chart-plus-stat">
+  <h2 variant="section">Chart + headline stat</h2>
+  <p data-note>Stat in header pairs with the chart so the current value is legible before the chart renders.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="chart plus stat">
+      <card-ui data-chunk="chart-in-card-chart-plus-stat" style="max-width:520px;">
+        <header>
+          <span slot="heading">
+            <stat-ui label="MRR" value="$48,290" change="+12.4%" trend="up"></stat-ui>
+          </span>
+        </header>
+        <section>
+          <chart-ui id="pat-mrr" type="line" x="month" y="revenue" smooth="0.4" hide-values></chart-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="chart-plus-breakdown">
+  <h2 variant="section">Chart + inline breakdown</h2>
+  <p data-note>Chart shows aggregate; breakdown beneath gives the composition. Most SaaS "Overview" tiles follow this shape.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="chart plus breakdown">
+      <card-ui data-chunk="chart-in-card-chart-plus-breakdown" style="max-width:520px;">
+        <header>
+          <span slot="heading"><h3>Sessions</h3></span>
+          <text-ui slot="description" color="subtle">This week</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <chart-ui id="pat-sessions" type="bar" x="day" y="sessions" hide-values></chart-ui>
+            <grid-ui columns="3" gap="2">
+              <card-ui><section><stat-ui label="Desktop" value="2,840"></stat-ui></section></card-ui>
+              <card-ui><section><stat-ui label="Mobile" value="1,590"></stat-ui></section></card-ui>
+              <card-ui><section><stat-ui label="Tablet" value="280"></stat-ui></section></card-ui>
+            </grid-ui>
+          </col-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="trend-footer">
+  <h2 variant="section">Trend footer</h2>
+  <p data-note>Footer carries trend narrative + period caption using the new footer <code>heading</code> / <code>description</code> slot routing (symmetric with header). Shadcn-style revenue card translated to AdiaUI primitives.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="area chart + trend footer">
+      <card-ui data-chunk="chart-in-card-trend-footer" style="max-width:520px;">
+        <header>
+          <span slot="heading"><h3>Revenue</h3></span>
+          <text-ui slot="description" color="subtle">January – March 2024</text-ui>
+        </header>
+        <section>
+          <chart-ui id="pat-trend-revenue" type="area" x="month" y="revenue" hide-values></chart-ui>
+        </section>
+        <footer>
+          <span slot="heading">Trending up by 5.2% this month</span>
+          <text-ui slot="description" color="subtle">Showing total visitors for the last 3 months</text-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="stat-with-sparkline">
+  <h2 variant="section">Stat with inline sparkline</h2>
+  <p data-note>Stat-ui's <code>chart</code> slot positions a sparkline to the right of the hero number — KPI and its trajectory as one visual unit.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="stat with sparkline slot">
+      <card-ui data-chunk="chart-in-card-stat-with-sparkline" style="max-width:320px;">
+        <section>
+          <stat-ui label="Revenue" value="$48.2k" change="+12.5%" trend="up">
+            <chart-ui id="pat-stat-spark" slot="chart" type="sparkline" x="month" y="value"></chart-ui>
+          </stat-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="chart-with-filter-pills">
+  <h2 variant="section">Chart with filter pills</h2>
+  <p data-note>A <code>segmented-ui</code> in the header's <code>action</code> slot drives a time-range selection. Wire its <code>value</code> to refetch / slice the chart's <code>.data</code> via a controller.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="chart with 1w / 2w / 1m / 3m pills">
+      <card-ui data-chunk="chart-in-card-chart-with-filter-pills" style="max-width:520px;">
+        <header>
+          <span slot="heading"><h3>Sessions</h3></span>
+          <segmented-ui slot="action" value="1m">
+            <segment-ui text="1w" value="1w"></segment-ui>
+            <segment-ui text="2w" value="2w"></segment-ui>
+            <segment-ui text="1m" value="1m"></segment-ui>
+            <segment-ui text="3m" value="3m"></segment-ui>
+          </segmented-ui>
+        </header>
+        <section>
+          <chart-ui id="pat-filter-sessions" type="line" x="day" y="sessions" hide-values></chart-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="anatomy">
+  <h2 variant="section">Anatomy</h2>
+  <code-ui language="html">&lt;card-ui&gt;
+  &lt;header&gt;
+    &lt;!-- name + current value --&gt;
+    &lt;span slot="heading"&gt;&lt;h3&gt;Revenue&lt;/h3&gt;&lt;/span&gt;
+    &lt;text-ui slot="description" color="subtle"&gt;Last 12 months&lt;/text-ui&gt;
+  &lt;/header&gt;
+  &lt;section&gt;
+    &lt;!-- the chart — bleed=true removes padding for sparklines --&gt;
+    &lt;chart-ui type="bar" x="month" y="revenue"&gt;&lt;/chart-ui&gt;
+  &lt;/section&gt;
+  &lt;footer&gt;
+    &lt;!-- optional CTA or supporting context --&gt;
+    &lt;button-ui text="View report" variant="outline" block&gt;&lt;/button-ui&gt;
+  &lt;/footer&gt;
+&lt;/card-ui&gt;</code-ui>
+</section>
+<section data-section data-property="rules">
+  <h2 variant="section">Rules</h2>
+  <ul>
+    <li>For sparklines, set <code>bleed</code> on the card's <code>&lt;section&gt;</code> so the line touches the edges.</li>
+    <li>Put <code>hide-values</code> on bar/line charts inside cards — the stat in the header already shows the current number.</li>
+    <li>Use <code>&lt;stat-ui&gt;</code> in the heading slot only when the card's primary metric is a single number; otherwise use <code>&lt;h3&gt;</code> + description.</li>
+    <li>Keep breakdowns shallow — 3–4 stats max. More belongs in a full section, not inside a tile.</li>
+  </ul>
+</section>

package/patterns/chart-in-card/chart-in-card.examples.js ADDED Viewed

@@ -0,0 +1,46 @@
+/** Chart-in-Card pattern — populate chart data */
+const monthlyRevenue = [
+  { month: 'Jan', revenue: 3200 }, { month: 'Feb', revenue: 4500 },
+  { month: 'Mar', revenue: 2800 }, { month: 'Apr', revenue: 6200 },
+  { month: 'May', revenue: 5500 }, { month: 'Jun', revenue: 7100 },
+  { month: 'Jul', revenue: 5200 }, { month: 'Aug', revenue: 4800 },
+  { month: 'Sep', revenue: 5500 }, { month: 'Oct', revenue: 6100 },
+  { month: 'Nov', revenue: 6800 }, { month: 'Dec', revenue: 5400 },
+];
+const sessions = [
+  { day: 'Mon', sessions: 620 }, { day: 'Tue', sessions: 710 },
+  { day: 'Wed', sessions: 580 }, { day: 'Thu', sessions: 830 },
+  { day: 'Fri', sessions: 790 }, { day: 'Sat', sessions: 420 },
+  { day: 'Sun', sessions: 360 },
+];
+const sparkline = (vals) => vals.map((v, i) => ({ d: i, v }));
+export default function setup(router) {
+  const views = router.querySelector('#pat-spark-views');
+  if (views) views.data = sparkline([42, 38, 45, 50, 48, 55, 52, 60, 58, 65, 62, 70]);
+  const revenue = router.querySelector('#pat-revenue');
+  if (revenue) revenue.data = monthlyRevenue;
+  const mrr = router.querySelector('#pat-mrr');
+  if (mrr) mrr.data = monthlyRevenue;
+  const sess = router.querySelector('#pat-sessions');
+  if (sess) sess.data = sessions;
+  const trend = router.querySelector('#pat-trend-revenue');
+  if (trend) trend.data = monthlyRevenue.slice(0, 3);
+  const statSpark = router.querySelector('#pat-stat-spark');
+  if (statSpark) statSpark.data = [
+    { month: 'Jan', value: 30 }, { month: 'Feb', value: 42 },
+    { month: 'Mar', value: 38 }, { month: 'Apr', value: 55 },
+    { month: 'May', value: 62 }, { month: 'Jun', value: 71 },
+  ];
+  const filterSess = router.querySelector('#pat-filter-sessions');
+  if (filterSess) filterSess.data = sessions;
+}

package/patterns/chart-in-card/chart-in-card.html ADDED Viewed

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Chart in Card (pattern) — AdiaUI</title>
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/chart/chart.css">
+  <link rel="stylesheet" href="../../components/code/code.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/grid/grid.css">
+  <link rel="stylesheet" href="../../components/segment/segment.css">
+  <link rel="stylesheet" href="../../components/segmented/segmented.css">
+  <link rel="stylesheet" href="../../components/stat/stat.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <!-- Component JS -->
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/chart/chart.js"></script>
+  <script type="module" src="../../components/code/code.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/grid/grid.js"></script>
+  <script type="module" src="../../components/segment/segment.js"></script>
+  <script type="module" src="../../components/segmented/segmented.js"></script>
+  <script type="module" src="../../components/stat/stat.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./chart-in-card.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+      try {
+        const mod = await import(/* @vite-ignore */ './chart-in-card.examples.js');
+        mod.default?.(root);
+      } catch (e) { console.error('[chart-in-card.html] setup failed:', e); }
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load chart-in-card.examples.html — ${err.message}</p>`;
+      console.error('[chart-in-card.html]', err);
+    }
+  </script>
+</body>
+</html>