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/filter-bar/filter-bar.examples.js ADDED Viewed

@@ -0,0 +1,23 @@
+/** Filter bar pattern — populate demo table */
+const columns = [
+  { key: 'name',    label: 'Name' },
+  { key: 'owner',   label: 'Owner' },
+  { key: 'status',  label: 'Status', render: (val) => {
+    const v = { Active: 'success', Draft: 'muted' }[val] || '';
+    return `<badge-ui text="${val}" variant="${v}"></badge-ui>`;
+  }},
+  { key: 'updated', label: 'Updated' },
+];
+const data = [
+  { name: 'Q4 roadmap',      owner: 'Alex Chen', status: 'Active', updated: '2h ago' },
+  { name: 'Design review',   owner: 'Alex Chen', status: 'Active', updated: '5h ago' },
+  { name: 'API v2 spec',     owner: 'Alex Chen', status: 'Active', updated: '1w ago' },
+  { name: 'Brand guidelines',owner: 'Alex Chen', status: 'Draft',  updated: '3d ago' },
+];
+export default function setup(router) {
+  const table = router.querySelector('#pat-filter-table');
+  if (table) { table.columns = columns; table.data = data; }
+}

package/patterns/filter-bar/filter-bar.html ADDED Viewed

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Filter Bar (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/action-list/action-list.css">
+  <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/popover/popover.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/search/search.css">
+  <link rel="stylesheet" href="../../components/segment/segment.css">
+  <link rel="stylesheet" href="../../components/segmented/segmented.css">
+  <link rel="stylesheet" href="../../components/table/table.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/action-list/action-list.js"></script>
+  <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/popover/popover.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/search/search.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/table/table.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('./filter-bar.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+      try {
+        const mod = await import(/* @vite-ignore */ './filter-bar.examples.js');
+        mod.default?.(root);
+      } catch (e) { console.error('[filter-bar.html] setup failed:', e); }
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load filter-bar.examples.html — ${err.message}</p>`;
+      console.error('[filter-bar.html]', err);
+    }
+  </script>
+</body>
+</html>

package/patterns/form-drawer/form-drawer.examples.html ADDED Viewed

@@ -0,0 +1,210 @@
+<header>
+  <div>
+    <h1>Form Drawer</h1>
+    <div data-actions>
+      <tag-ui size="sm">drawer-ui</tag-ui> <tag-ui size="sm">header</tag-ui> <tag-ui size="sm">body</tag-ui> <tag-ui size="sm">footer</tag-ui>
+    </div>
+  </div>
+  <p>Side-opening drawer with a sticky action row. The most common drawer shape in admin tools: header names the task, body scrolls the form, footer pins Cancel/Save so they stay reachable without scrolling.</p>
+</header>
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    Create/edit flows that fit in one screen's worth of fields. A modal is fine for
+    2–3 fields, a full page for 20+ fields. The drawer occupies the middle ground and
+    keeps the list context visible behind it.
+  </p>
+</section>
+<section data-section data-property="simple-form">
+  <h2 variant="section">Simple create form</h2>
+  <p data-note>3–5 fields with primary + cancel actions. The default shape for "+ New X" triggers.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="create form">
+      <button-ui data-chunk="form-drawer-simple-form" text="+ New project" variant="primary" onclick="this.nextElementSibling.open=true"></button-ui>
+      <drawer-ui text="New project" side="right" size="md">
+        <section slot="body">
+          <col-ui gap="3">
+            <field-ui label="Name">
+              <input-ui placeholder="My awesome project" required></input-ui>
+            </field-ui>
+            <field-ui label="Description">
+              <textarea-ui placeholder="What is this project for?" rows="3"></textarea-ui>
+            </field-ui>
+            <field-ui label="Visibility">
+              <select-ui placeholder="Select visibility">
+              <option value="public">Public</option>
+              <option value="team">Team only</option>
+              <option value="private">Private</option>
+            </select-ui>
+            </field-ui>
+          </col-ui>
+        </section>
+        <footer slot="footer">
+          <span slot="action">
+            <button-ui text="Cancel" variant="ghost" onclick="this.closest('drawer-ui').open=false"></button-ui>
+            <button-ui text="Create" variant="primary" onclick="this.closest('drawer-ui').open=false"></button-ui>
+          </span>
+        </footer>
+      </drawer-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="edit-form">
+  <h2 variant="section">Edit form with destructive action</h2>
+  <p data-note>Edit drawers pair a primary action with a destructive one in the footer. Delete sits on the left, Save on the right — separated by the spacer.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="edit form">
+      <button-ui data-chunk="form-drawer-edit-form" text="Edit project" icon="pencil" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+      <drawer-ui text="Edit project" side="right" size="md">
+        <section slot="body">
+          <col-ui gap="3">
+            <field-ui label="Name">
+              <input-ui value="Q4 roadmap"></input-ui>
+            </field-ui>
+            <field-ui label="Description">
+              <textarea-ui rows="3">Quarterly planning doc</textarea-ui>
+            </field-ui>
+            <field-ui label="Status">
+              <select-ui>
+              <option value="active" selected>Active</option>
+              <option value="archived">Archived</option>
+            </select-ui>
+            </field-ui>
+            <field-ui label="Notify team members" inline>
+              <switch-ui checked></switch-ui>
+            </field-ui>
+          </col-ui>
+        </section>
+        <footer slot="footer">
+          <span slot="action-leading">
+            <button-ui text="Delete" icon="trash" color="danger"></button-ui>
+          </span>
+          <span slot="action">
+            <button-ui text="Cancel" variant="ghost" onclick="this.closest('drawer-ui').open=false"></button-ui>
+            <button-ui text="Save changes" variant="primary" onclick="this.closest('drawer-ui').open=false"></button-ui>
+          </span>
+        </footer>
+      </drawer-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="tall-form">
+  <h2 variant="section">Long form — scroll body, sticky footer</h2>
+  <p data-note>The footer stays visible even when the form body overflows. This is why the sticky-footer pattern matters — users shouldn't have to scroll to find "Save".</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="long form">
+      <button-ui data-chunk="form-drawer-tall-form" text="Advanced settings" icon="gear" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
+      <drawer-ui text="Advanced settings" side="right" size="lg">
+        <section slot="body">
+          <col-ui gap="4">
+            <col-ui gap="3">
+              <h4>General</h4>
+              <field-ui label="Name">
+                <input-ui value="Production API"></input-ui>
+              </field-ui>
+              <field-ui label="Slug">
+                <input-ui prefix="/" value="production-api"></input-ui>
+              </field-ui>
+              <field-ui label="Description">
+                <textarea-ui rows="2"></textarea-ui>
+              </field-ui>
+            </col-ui>
+            <col-ui gap="3">
+              <h4>Limits</h4>
+              <range-ui label="Max concurrent requests" value="100" min="10" max="1000"></range-ui>
+              <range-ui label="Timeout (seconds)" value="30" min="5" max="300"></range-ui>
+              <range-ui label="Retry attempts" value="3" min="0" max="10"></range-ui>
+            </col-ui>
+            <col-ui gap="3">
+              <h4>Access</h4>
+              <field-ui label="Require authentication" inline>
+                <switch-ui checked></switch-ui>
+              </field-ui>
+              <field-ui label="Allow CORS" inline>
+                <switch-ui checked></switch-ui>
+              </field-ui>
+              <field-ui label="Rate limit by IP" inline>
+                <switch-ui></switch-ui>
+              </field-ui>
+              <field-ui label="Log all requests" inline>
+                <switch-ui></switch-ui>
+              </field-ui>
+            </col-ui>
+            <col-ui gap="3">
+              <h4>Notifications</h4>
+              <field-ui label="Email on errors" inline>
+                <check-ui checked></check-ui>
+              </field-ui>
+              <field-ui label="Slack on deploys" inline>
+                <check-ui></check-ui>
+              </field-ui>
+              <field-ui label="PagerDuty on outages" inline>
+                <check-ui></check-ui>
+              </field-ui>
+            </col-ui>
+          </col-ui>
+        </section>
+        <footer slot="footer">
+          <span slot="action">
+            <button-ui text="Cancel" variant="ghost" onclick="this.closest('drawer-ui').open=false"></button-ui>
+            <button-ui text="Save settings" variant="primary" onclick="this.closest('drawer-ui').open=false"></button-ui>
+          </span>
+        </footer>
+      </drawer-ui>
+    </div>
+  </div>
+</section>
+<section data-section data-property="anatomy">
+  <h2 variant="section">Anatomy</h2>
+  <code-ui language="html">&lt;drawer-ui text="New project" side="right" size="md"&gt;
+  &lt;!-- scrollable body --&gt;
+  &lt;section slot="body"&gt;
+    &lt;col-ui gap="3"&gt;
+      &lt;field-ui label="Name"&gt;
+        &lt;input-ui required&gt;&lt;/input-ui&gt;
+      &lt;/field-ui&gt;
+      &lt;field-ui label="Description"&gt;
+        &lt;textarea-ui&gt;&lt;/textarea-ui&gt;
+      &lt;/field-ui&gt;
+    &lt;/col-ui&gt;
+  &lt;/section&gt;
+  &lt;!-- sticky footer — single-cluster --&gt;
+  &lt;footer slot="footer"&gt;
+    &lt;span slot="action"&gt;
+      &lt;button-ui text="Cancel" variant="ghost"&gt;&lt;/button-ui&gt;
+      &lt;button-ui text="Create"  variant="primary"&gt;&lt;/button-ui&gt;
+    &lt;/span&gt;
+  &lt;/footer&gt;
+  &lt;!-- sticky footer — dual-cluster (destructive left, primary right) --&gt;
+  &lt;footer slot="footer"&gt;
+    &lt;span slot="action-leading"&gt;
+      &lt;button-ui text="Delete" color="danger"&gt;&lt;/button-ui&gt;
+    &lt;/span&gt;
+    &lt;span slot="action"&gt;
+      &lt;button-ui text="Cancel" variant="ghost"&gt;&lt;/button-ui&gt;
+      &lt;button-ui text="Save changes" variant="primary"&gt;&lt;/button-ui&gt;
+    &lt;/span&gt;
+  &lt;/footer&gt;
+&lt;/drawer-ui&gt;</code-ui>
+</section>
+<section data-section data-property="rules">
+  <h2 variant="section">Rules</h2>
+  <ul>
+    <li>The footer is <strong>opt-in</strong> — drawer-ui only mounts a footer slot when the author supplies one. Drawers without forms shouldn't add an empty one.</li>
+    <li>For a single right-aligned action cluster, wrap the buttons in <code>&lt;span slot="action"&gt;</code> — drawer's footer CSS self-aligns the slot to the end, no spacer needed.</li>
+    <li>For a <strong>dual cluster</strong> (destructive action on the left + primary on the right), pair <code>&lt;span slot="action-leading"&gt;</code> with <code>&lt;span slot="action"&gt;</code>. The leading slot gets <code>margin-inline-end: auto</code> and pushes the trailing cluster to the opposite edge — no spacer required.</li>
+    <li>Primary action last (right-most) — follows OS conventions.</li>
+    <li>Wire close via <code>onclick="this.closest('drawer-ui').open=false"</code> on Cancel and on successful submit.</li>
+    <li>If the form has unsaved changes, trap close via the <code>close</code> event and show a confirm — don't rely on the user remembering.</li>
+  </ul>
+</section>

package/patterns/form-drawer/form-drawer.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Form Drawer (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/check/check.css">
+  <link rel="stylesheet" href="../../components/code/code.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/drawer/drawer.css">
+  <link rel="stylesheet" href="../../components/field/field.css">
+  <link rel="stylesheet" href="../../components/input/input.css">
+  <link rel="stylesheet" href="../../components/range/range.css">
+  <link rel="stylesheet" href="../../components/select/select.css">
+  <link rel="stylesheet" href="../../components/switch/switch.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/textarea/textarea.css">
+  <!-- Component JS -->
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/check/check.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/drawer/drawer.js"></script>
+  <script type="module" src="../../components/field/field.js"></script>
+  <script type="module" src="../../components/input/input.js"></script>
+  <script type="module" src="../../components/range/range.js"></script>
+  <script type="module" src="../../components/select/select.js"></script>
+  <script type="module" src="../../components/switch/switch.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/textarea/textarea.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('./form-drawer.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 form-drawer.examples.html — ${err.message}</p>`;
+      console.error('[form-drawer.html]', err);
+    }
+  </script>
+</body>
+</html>