@pure-ds/core 0.5.24 → 0.5.26

package/packages/pds-cli/bin/templates/bootstrap/pds.config.js

@@ -0,0 +1,59 @@
+const defaultEnhancers = Array.isArray(globalThis.PDS?.defaultEnhancers)
+  ? globalThis.PDS.defaultEnhancers
+  : [];
+
+export const config = {
+  mode: "static",
+  preset: "social-feed",
+
+  autoDefine: {
+    predefine: ["pds-icon", "pds-drawer", "pds-toaster"],
+
+    // Custom component paths
+    mapper: (tag) => {
+      if (tag.startsWith("my-")) return `/assets/my/${tag}.js`;
+
+      // Return nothing to use PDS default mapping
+    },
+
+    enhancers: [
+      ...defaultEnhancers,
+      {
+        selector: ".hero",
+        description: "Make PDS border-gradient rotate slowly",
+        run: (element) => {
+          let angle = 135;
+          const speed = 0.5; // degrees per frame (~30 degrees/second at 60fps)
+
+          function animate() {
+            angle = (angle + speed) % 360;
+            element.style.setProperty("--gradient-angle", `${angle}deg`);
+            requestAnimationFrame(animate);
+          }
+
+          animate();
+        },
+      },
+    ],
+  },
+
+  // Uncomment to override preset design tokens:
+  // design: {
+  //   colors: {
+  //     primary: '#007acc',
+  //     secondary: '#5c2d91',
+  //     accent: '#ec4899'
+  //   },
+  //   typography: {
+  //     fontFamilyHeadings: 'Inter, sans-serif',
+  //     fontFamilyBody: 'Inter, sans-serif',
+  //     baseFontSize: 16,
+  //     fontScale: 1.25
+  //   },
+  //   spatialRhythm: {
+  //     baseUnit: 8,
+  //     scaleRatio: 1.5
+  //   }
+  // }
+  
+};

package/packages/pds-cli/bin/templates/bootstrap/public/assets/css/app.css

@@ -0,0 +1,59 @@
+html:not(.pds-ready) {
+  opacity: 0;
+}
+
+main {
+  margin: auto;
+}
+
+h1 {
+  background: linear-gradient(var(--gradient-angle, 135deg),
+    var(--color-primary-400),
+    var(--color-accent-400)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.container {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: 100dvh;
+  padding: 0;
+}
+
+header, footer {
+  padding: var(--spacing-4);
+}
+
+footer {
+  text-align: center;
+}
+
+.auto-gen {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+#settings-btn {
+  position: fixed;
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+}
+
+.hero {
+  padding: var(--spacing-8);
+  zoom: 1.15;
+  text-align: center;
+  border: var(--border-width-medium) solid transparent;
+  background: linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
+    linear-gradient(var(--gradient-angle, 135deg), var(--color-primary-400), var(--color-accent-400)) border-box;
+  max-width: var(--max-w-lg);
+  border-radius: var(--radius-lg);
+  border-width: 3px;
+}
+
+.hero > div {
+  margin: var(--spacing-10) 0;
+}

package/packages/pds-cli/bin/templates/bootstrap/public/assets/js/dev-reload.js

@@ -0,0 +1,18 @@
+const shouldConnect =
+  location.hostname === "localhost" || location.hostname === "127.0.0.1";
+
+if (shouldConnect) {
+  const reloadPort = 4174;
+  const endpoint = "http://localhost:" + reloadPort + "/events";
+  const source = new EventSource(endpoint);
+
+  source.onmessage = (event) => {
+    if (event.data === "reload") {
+      location.reload();
+    }
+  };
+
+  source.onerror = () => {
+    source.close();
+  };
+}

package/packages/pds-cli/bin/templates/bootstrap/public/assets/my/my-home.js

@@ -0,0 +1,32 @@
+/**
+ * @file my-home.js
+ * @description A simple home component for the app.
+ */
+customElements.define(
+  "my-home",
+  class extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = /*html*/ `
+        <article class="hero">
+          <h1>Welcome to your new App</h1>
+          <div>
+            <p>
+              This <code>&lt;my-home&gt;</code> Web Component is lazy-loaded and styled with Pure Design System.
+            </p>
+            <p>
+              You can start building your app by editing the files in <code>public/assets/my/</code> and <code>src/js/</code>.
+            </p>
+          </div>
+          <nav>
+            <a target="_blank" href="https://github.com/Pure-Web-Foundation/pure-ds/blob/main/getting-started.md" class="btn btn-primary btn-lg">
+              <pds-icon icon="rocket"></pds-icon> Get Started
+            </a>
+            <a target="_blank" href="https://puredesignsystem.z6.web.core.windows.net/storybook/" class="btn btn-secondary btn-lg">
+              <pds-icon icon="book-open"></pds-icon> Storybook
+            </a>
+          </nav>
+        </article>
+      `;
+    }
+  },
+);

package/packages/pds-cli/bin/templates/bootstrap/public/assets/my/my-theme.js

@@ -0,0 +1,74 @@
+/**
+ * my-theme Web Component - allows users to select the app theme (light, dark, system)
+ *
+ * Uses Pure Design System (PDS) for styling and theming.
+ */
+customElements.define(
+  "my-theme",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+    }
+
+    async connectedCallback() {
+      const componentStyles = PDS.createStylesheet(`
+        :host {
+          display: block;
+        }
+      `);
+
+      await PDS.adoptLayers(
+        this.shadowRoot,
+        ["tokens", "primitives", "components", "utilities"],
+        [componentStyles],
+      );
+
+      this.shadowRoot.innerHTML = /*html*/ `<form>
+          <fieldset role="radiogroup" aria-label="Theme" class="buttons">
+            <legend>Theme</legend>
+            <label>
+              <input type="radio" name="theme" value="system" />
+              <span><pds-icon icon="moon-stars"></pds-icon>System</span>
+            </label>
+            <label>
+              <input type="radio" name="theme" value="light" />
+              <span>
+                <pds-icon icon="sun"></pds-icon> Light </span>
+              </label>
+              <label>
+                <input type="radio" name="theme" value="dark" />
+                <span><pds-icon icon="moon"></pds-icon> Dark </span>
+              </label>
+          </fieldset>
+        </form>
+        `;
+
+      this.updateCheckedState();
+
+      this.shadowRoot.addEventListener("change", (e) => {
+        if (e.target.type === "radio" && e.target.name === "theme") {
+          PDS.theme = e.target.value;
+          PDS.toast("Theme changed to " + e.target.value, { duration: 2000 });
+        }
+      });
+
+      const observer = new MutationObserver(() => {
+        this.updateCheckedState();
+      });
+
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["data-theme"],
+      });
+    }
+
+    updateCheckedState() {
+      const currentTheme = PDS.theme || "system";
+      const radios = this.shadowRoot.querySelectorAll('input[type="radio"]');
+      radios.forEach((radio) => {
+        radio.checked = radio.value === currentTheme;
+      });
+    }
+  },
+);

package/packages/pds-cli/bin/templates/bootstrap/public/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pure Design System</title>
+
+    <!-- PDS Styles -->
+    <link rel="stylesheet" href="/assets/css/app.css" />
+
+    <!-- Import Map for Lit components -->
+    <script type="importmap">
+      {
+        "imports": {
+          "#pds/lit": "/assets/js/lit.js"
+        }
+      }
+    </script>
+
+    <!-- Dev live-reload (safe in production, no-op without server) -->
+    <script type="module" src="/assets/js/dev-reload.js" defer></script>
+
+    <!-- App Script -->
+    <script type="module" src="/assets/js/app.js" defer></script>
+  </head>
+
+  <body class="container">
+    <header class="stack-sm">
+      <p class="auto-gen">Auto-generated by PDS {{PDS_VERSION}} at {{PDS_GENERATED_AT}}</p>
+    </header>
+
+    <main></main>
+
+    <footer class="text-sm text-muted">
+      <small>&copy; 2026 Pure Design System</small>
+    </footer>
+  </body>
+</html>

package/packages/pds-cli/bin/templates/bootstrap/src/js/app.js

@@ -0,0 +1,38 @@
+import { PDS } from "@pure-ds/core";
+import { config } from "../../pds.config.js";
+
+await PDS.start(config);
+
+const main = document.querySelector("main");
+if (main && !main.querySelector("my-home")) {
+  main.innerHTML = "<my-home></my-home>";
+}
+
+/**
+ * Generates an HTML NodeList by parsing the given HTML string
+ * @param {String} html
+ * @returns {NodeListOf<ChildNode>} DOM element
+ */
+const parseHTML = (html) => {
+  return new DOMParser().parseFromString(html, "text/html").body.childNodes;
+};
+
+const settingsBtn = parseHTML(
+  /*html*/ `<button id="settings-btn" class="icon-only btn-xs btn-outline" aria-label="Settings">
+    <pds-icon icon="gear"></pds-icon>
+  </button>`,
+)[0];
+
+document.body.appendChild(settingsBtn);
+
+const drawer = document.createElement("pds-drawer");
+drawer.setAttribute("position", "right");
+
+drawer.innerHTML = /*html*/ `<div slot="drawer-header">Settings</div>
+  <div slot="drawer-content"><my-theme></my-theme></div>`;
+
+document.body.appendChild(drawer);
+
+settingsBtn.addEventListener("click", () => {
+  drawer.open = true;
+});