@pure-ds/core 0.4.5 → 0.4.7

package/dist/types/public/assets/pds/components/pds-jsonform.d.ts

@@ -21,7 +21,7 @@
  *
  * 5. Completely custom actions (hides default buttons):
  *    <pds-jsonform .jsonSchema=${schema} hide-actions>
- *      <div slot="actions" style="display: flex; gap: 1rem;">
+ *      <div slot="actions" class="flex gap-md">
  *        <button type="submit" class="btn btn-primary">Custom Submit</button>
  *        <button type="button" class="btn">Custom Action</button>
  *      </div>

package/dist/types/public/assets/pds/components/pds-jsonform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pds-jsonform.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-jsonform.js"],"names":[],"mappings":"AAgCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAGF,yBAEC;IAaC,gBAA2B;IAC3B,cAAyB;IACzB,aAAwB;IACxB,YAAuB;IACvB,eAAoB;IACpB,qBAAwB;IACxB,oBAA2B;IAC3B,mBAAyB;IACzB,mBAAsB;IACtB,oBAAuB;IAiBzB,8CAEC;IACD,4BAEC;IAGD,oBAEC;IAkBD;;;MAIC;IAED,uBAEC;IAED,0BAMC;IAGD,+BAyBC;IA+ND,cA2CC;;CA+4CF"}
+{"version":3,"file":"pds-jsonform.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-jsonform.js"],"names":[],"mappings":"AAgCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAGF,yBAEC;IAaC,gBAA2B;IAC3B,cAAyB;IACzB,aAAwB;IACxB,YAAuB;IACvB,eAAoB;IACpB,qBAAwB;IACxB,oBAA2B;IAC3B,mBAAyB;IACzB,mBAAsB;IACtB,oBAAuB;IAiBzB,8CAEC;IACD,4BAEC;IAGD,oBAEC;IAkBD;;;MAIC;IAED,uBAEC;IAED,0BAMC;IAGD,+BAyBC;IA+ND,cAyCC;;CA63CF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pure-ds/core",
   "shortname": "pds",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "Pure Design System - Why develop a Design System when you can generate one?",
   "repository": {
     "type": "git",

package/public/assets/js/app.js

@@ -3684,7 +3684,7 @@ export const pdsConfig = ${JSON.stringify(this.config,null,2)};
             `,setTimeout(()=>{p.innerHTML=`
                 <pds-icon icon="clipboard" size="sm"></pds-icon>
                 Copy HTML
-              `},2e3)})})},100)}async loadShiki(){if(this.#a)return this.#a;if(this.#e){for(;this.#e;)await new Promise(r=>setTimeout(r,100));return this.#a}this.#e=!0;try{let r=await import("https://esm.sh/shiki@1.0.0");return this.#a=await r.getHighlighter({themes:["dark-plus"],langs:["html"]}),this.#a}catch(r){return console.error("Failed to load Shiki:",r),null}finally{this.#e=!1}}async highlightWithShiki(r){let e=await this.loadShiki();if(!e)return this.escapeHTML(r);try{let a=e.codeToHtml(r,{lang:"html",theme:"dark-plus"}).match(/<code[^>]*>([\s\S]*)<\/code>/);return a?a[1]:this.escapeHTML(r)}catch(t){return console.error("Shiki highlighting failed:",t),this.escapeHTML(r)}}escapeHTML(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}async getShowdownConverter(){if(this._showdown)return this._showdown;let r=await this.loadShowdownFromCDN();return!r||!r.Converter?null:(this._showdown=new r.Converter({ghCompatibleHeaderId:!0,tables:!0,strikethrough:!0,tasklists:!0}),this._showdown)}async loadShowdownFromCDN(){if(typeof window<"u"&&window.showdown)return window.showdown;if(this._showdownLoading){for(;this._showdownLoading;)await new Promise(e=>setTimeout(e,50));return window.showdown||null}this._showdownLoading=!0;let r=["https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js","https://unpkg.com/showdown@2.1.0/dist/showdown.min.js"];for(let e of r)try{if(await this._injectScript(e,"showdown"),window.showdown)return this._showdownLoading=!1,window.showdown}catch{}return this._showdownLoading=!1,null}_injectScript(r,e){return new Promise((t,a)=>{if(document.querySelector(`script[data-lib="${e}"][src="${r}"]`)){setTimeout(t,0);return}let o=document.createElement("script");o.src=r,o.async=!0,o.defer=!0,o.dataset.lib=e||"lib",o.onload=()=>t(),o.onerror=()=>{o.remove(),a(new Error(`Failed to load script: ${r}`))},document.head.appendChild(o)})}scrollToRelevantSection(r){console.log("\u{1F3AF} Scrolling to section for field:",r);let e=r.startsWith("/")?r.slice(1):r;console.log("  Normalized path:",e);let t={"colors/primary":"color-system","colors/secondary":"color-system","colors/accent":"color-system","colors/background":"color-system","colors/success":"color-system","colors/warning":"color-system","colors/danger":"color-system","colors/info":"color-system","typography/":"typography","spatialRhythm/":"spacing","layers/":"surfaces-shadows","shape/":"buttons","behavior/transitionSpeed":"interactive-states","behavior/":"interactive-states","components/forms":"forms","components/alerts":"alerts","components/badges":"badges","components/tables":"tables","components/toasts":"toasts","components/modals":"modals","components/tabStrip":"tabs","icons/":"icons"},a=null;for(let[o,i]of Object.entries(t))if(e.startsWith(o)){a=i,console.log(`  \u2713 Matched pattern "${o}" \u2192 section "${i}"`);break}if(a){let o=this.querySelector(`[data-section="${a}"]`);console.log(`  Searching for section: [data-section="${a}"]`,o?"\u2713 Found":"\u2717 Not found"),o?(o.scrollIntoView({behavior:"smooth",block:"start"}),o.style.transition="background-color 0.3s ease",o.style.backgroundColor="var(--color-primary-50)",setTimeout(()=>{o.style.backgroundColor=""},1500),console.log("  \u2713 Scrolled and highlighted section")):console.warn(`  \u2717 Section [data-section="${a}"] not found in DOM`)}else console.warn(`  \u2717 No section mapping found for field: ${r}`)}renderDisabledSection(r,e){return S`
+              `},2e3)})})},100)}async loadShiki(){if(this.#a)return this.#a;if(this.#e){for(;this.#e;)await new Promise(r=>setTimeout(r,50));return this.#a}this.#e=!0;try{let r=await import("https://esm.sh/shiki@1.0.0");return this.#a=await r.getHighlighter({themes:["github-dark","github-light"],langs:["html","css","javascript","json"]}),this.#a}catch(r){return console.error("Failed to load Shiki:",r),null}finally{this.#e=!1}}async highlightWithShiki(r,e="html"){let t=await this.loadShiki();if(!t)return this.escapeHTML(r);try{let o=document.documentElement.getAttribute("data-theme")==="dark"?"github-dark":"github-light",s=t.codeToHtml(r,{lang:e,theme:o}).match(/<code[^>]*>([\s\S]*)<\/code>/);return s?s[1]:this.escapeHTML(r)}catch(a){return console.error("Shiki highlighting failed:",a),this.escapeHTML(r)}}escapeHTML(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}async getShowdownConverter(){if(this._showdown)return this._showdown;let r=await this.loadShowdownFromCDN();return!r||!r.Converter?null:(this._showdown=new r.Converter({ghCompatibleHeaderId:!0,tables:!0,strikethrough:!0,tasklists:!0}),this._showdown)}async loadShowdownFromCDN(){if(typeof window<"u"&&window.showdown)return window.showdown;if(this._showdownLoading){for(;this._showdownLoading;)await new Promise(e=>setTimeout(e,50));return window.showdown||null}this._showdownLoading=!0;let r=["https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js","https://unpkg.com/showdown@2.1.0/dist/showdown.min.js"];for(let e of r)try{if(await this._injectScript(e,"showdown"),window.showdown)return this._showdownLoading=!1,window.showdown}catch{}return this._showdownLoading=!1,null}_injectScript(r,e){return new Promise((t,a)=>{if(document.querySelector(`script[data-lib="${e}"][src="${r}"]`)){setTimeout(t,0);return}let o=document.createElement("script");o.src=r,o.async=!0,o.defer=!0,o.dataset.lib=e||"lib",o.onload=()=>t(),o.onerror=()=>{o.remove(),a(new Error(`Failed to load script: ${r}`))},document.head.appendChild(o)})}scrollToRelevantSection(r){console.log("\u{1F3AF} Scrolling to section for field:",r);let e=r.startsWith("/")?r.slice(1):r;console.log("  Normalized path:",e);let t={"colors/primary":"color-system","colors/secondary":"color-system","colors/accent":"color-system","colors/background":"color-system","colors/success":"color-system","colors/warning":"color-system","colors/danger":"color-system","colors/info":"color-system","typography/":"typography","spatialRhythm/":"spacing","layers/":"surfaces-shadows","shape/":"buttons","behavior/transitionSpeed":"interactive-states","behavior/":"interactive-states","components/forms":"forms","components/alerts":"alerts","components/badges":"badges","components/tables":"tables","components/toasts":"toasts","components/modals":"modals","components/tabStrip":"tabs","icons/":"icons"},a=null;for(let[o,i]of Object.entries(t))if(e.startsWith(o)){a=i,console.log(`  \u2713 Matched pattern "${o}" \u2192 section "${i}"`);break}if(a){let o=this.querySelector(`[data-section="${a}"]`);console.log(`  Searching for section: [data-section="${a}"]`,o?"\u2713 Found":"\u2717 Not found"),o?(o.scrollIntoView({behavior:"smooth",block:"start"}),o.style.transition="background-color 0.3s ease",o.style.backgroundColor="var(--color-primary-50)",setTimeout(()=>{o.style.backgroundColor=""},1500),console.log("  \u2713 Scrolled and highlighted section")):console.warn(`  \u2717 Section [data-section="${a}"] not found in DOM`)}else console.warn(`  \u2717 No section mapping found for field: ${r}`)}renderDisabledSection(r,e){return S`
         <section class="showcase-section disabled">
           <h2>${r}</h2>
           <p class="disabled-message">${e}</p>

package/public/assets/pds/components/pds-jsonform.js

@@ -53,7 +53,7 @@ const DEFAULT_OPTIONS = {
  *
  * 5. Completely custom actions (hides default buttons):
  *    <pds-jsonform .jsonSchema=${schema} hide-actions>
- *      <div slot="actions" style="display: flex; gap: 1rem;">
+ *      <div slot="actions" class="flex gap-md">
  *        <button type="submit" class="btn btn-primary">Custom Submit</button>
  *        <button type="button" class="btn">Custom Action</button>
  *      </div>
@@ -416,10 +416,7 @@ export class SchemaForm extends LitElement {
   render() {
     const tree = this.#compiled;
     if (!tree)
-      return html`<div
-        class="pds-jsonform-error"
-        style="color: red; padding: 1rem; border: 1px solid red; background: #fee;"
-      >
+      return html`<div class="alert alert-error">
         <p>Failed to generate form schema.</p>
         <pre>${JSON.stringify(this.#data, null, 2)}</pre>
       </div>`;
@@ -431,6 +428,7 @@ export class SchemaForm extends LitElement {
         : "post";
     return html`
       <form
+        ?data-required=${this.hasAttribute("data-required")}
         method=${m}
         action=${this.action ?? nothing}
         @submit=${this.#onSubmit}
@@ -501,9 +499,8 @@ export class SchemaForm extends LitElement {
     // Check for surface wrapping
     const surface = ui?.["ui:surface"] || pathOptions.surface;
 
-    // Build layout classes and inline styles
+    // Build layout classes using PDS utilities
     const layoutClasses = [];
-    let layoutStyle = "";
     const layoutOptions = ui?.["ui:layoutOptions"] || {};
 
     if (layout === "flex") {
@@ -511,16 +508,8 @@ export class SchemaForm extends LitElement {
       if (layoutOptions.wrap) layoutClasses.push("flex-wrap");
       if (layoutOptions.direction === "column") layoutClasses.push("flex-col");
       if (layoutOptions.gap) {
-        // Check if gap is a CSS class name (e.g., 'md', 'lg') or a CSS value
-        if (
-          layoutOptions.gap.startsWith("var(") ||
-          layoutOptions.gap.includes("px") ||
-          layoutOptions.gap.includes("rem")
-        ) {
-          layoutStyle += `gap: ${layoutOptions.gap};`;
-        } else {
-          layoutClasses.push(`gap-${layoutOptions.gap}`);
-        }
+        // Use PDS gap utility classes (xs, sm, md, lg, xl, 0)
+        layoutClasses.push(`gap-${layoutOptions.gap}`);
       }
     } else if (layout === "grid") {
       layoutClasses.push("grid");
@@ -532,16 +521,8 @@ export class SchemaForm extends LitElement {
         layoutClasses.push(`grid-cols-${cols}`);
       }
       if (layoutOptions.gap) {
-        // Check if gap is a CSS class name (e.g., 'md', 'lg') or a CSS value
-        if (
-          layoutOptions.gap.startsWith("var(") ||
-          layoutOptions.gap.includes("px") ||
-          layoutOptions.gap.includes("rem")
-        ) {
-          layoutStyle += `gap: ${layoutOptions.gap};`;
-        } else {
-          layoutClasses.push(`gap-${layoutOptions.gap}`);
-        }
+        // Use PDS gap utility classes (xs, sm, md, lg, xl, 0)
+        layoutClasses.push(`gap-${layoutOptions.gap}`);
       }
     }
 
@@ -553,7 +534,6 @@ export class SchemaForm extends LitElement {
       <fieldset
         data-path=${node.path}
         class=${ifDefined(fieldsetClass)}
-        style=${ifDefined(layoutStyle || undefined)}
       >
         ${!this.hideLegend && !context.hideLegend
           ? html`<legend>${legend}</legend>`
@@ -1612,7 +1592,7 @@ export class SchemaForm extends LitElement {
             richtextOpts.placeholder || attrs.placeholder
           )}
           .value=${value ?? ""}
-          toolbar=${ifDefined(richtextOpts.toolbar)}
+          ?toolbar=${richtextOpts.toolbar}
           ?required=${!!attrs.required}
           ?submit-on-enter=${richtextOpts.submitOnEnter ?? false}
           spellcheck=${richtextOpts.spellcheck ?? true ? "true" : "false"}

package/readme.md

@@ -6,18 +6,25 @@
 [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](#license)
 [![npm version](https://img.shields.io/npm/v/@pure-ds/core.svg)](https://www.npmjs.com/package/@pure-ds/core)
 
-**Why build a design system when you can generate one?**
-
 ![Pure Design System logo](public/assets/img/logo.png)
 
-> A radically lightweight, fully standards-based design system for the modern web
-> Everything optional. Nothing hidden. The force is within the platform.
+## With Great Standards Comes Great Power
+
+**The browser is the framework. Semantic HTML is the component model. Web Standards are enough.**
+
+PDS is a **configuration-first, standards-only design system generator**. Not a framework. Not a CSS library. Not tied to any toolchain.
 
-Pure Design System generates complete, production-ready design systems from JavaScript configuration. Write your design intent once—colors, typography, spacing—and get tokens, primitives, components, and utilities automatically.
+You write a small JavaScript config. PDS generates:
+- **Deterministic CSS** (global and Constructable Stylesheets for Web Components)
+- **A complete token hierarchy** (inspect via `PDS.compiled` in DevTools)
+- **Zero-specificity primitives** (`:where()` selectors—your CSS always wins)
 
-### pds.config.js 
+Everything is optional. Use only tokens, or CSS, or add enhancements, or include components. Nothing forces itself into your project.
+
+### The Config
 
 ```javascript
+// pds.config.js
 export const config = {
   design: {
     colors: { primary: '#007acc', secondary: '#5c2d91' },
@@ -27,43 +34,87 @@ export const config = {
 }
 ```
 
-### app.js
+### The Result
 
 ```javascript
+// app.js
 import { PDS } from '@pure-ds/core';
 import { config } from './pds.config.js';
 
 await PDS.start(config);
+// That's it. Start writing semantic HTML.
+```
+
+---
+
+## The PDS Philosophy
+
+### Semantic Classes First
+PDS generates **high-level primitives** that style semantic HTML:
 
-// Start using components immediately
-// <pds-icon icon="star"></pds-icon>
+```html
+<article class="card">...</article>
+<button class="btn-primary">Save</button>
+<div class="alert alert-success">Done!</div>
+```
+
+### Layout Utilities—Sparingly
+A **small set** of layout utilities for composition:
+
+```html
+<div class="flex gap-md items-center">...</div>
+<section class="stack-lg">...</section>
 ```
 
-**Key Features:**
+No `.text-blue-500`. No `.p-4`. No `.rounded-lg`. **Spacing, colors, radii are tokens—not classes.**
 
-- 🎨 **Configuration-Driven** - Single source of truth generates everything
-- 🚀 **Live or Static** - Runtime generation or pre-built bundles
-- 🎯 **Framework Agnostic** - Vanilla, Lit, React, Vue, Svelte, Next.js
-- 🌐 **Web Standards** - EventTarget API, Constructable Stylesheets, Shadow DOM
-- 🧩 **Progressive Enhancement** - Semantic HTML first, enhance where needed
-- 🔍 **Smart Query System** - Ask questions: "what is the focus border color?"
-- ♿ **Accessibility Built-in** - WCAG AA validation, contrast checking
-- 🎛️ **Interactive Configurator** - Visual design tool with live preview
-- 🔤 **Automatic Font Loading** - Google Fonts loaded on demand
-- 📦 **Zero Build Required** - Works directly in browsers
-- 📋 **Custom Elements Manifest** - Full IDE integration with autocomplete and type checking
+### Inline Styles? Only for Tokens
+The **only** valid `style=""` in PDS sets CSS custom properties:
+
+```html
+<!-- ✓ Token override -->
+<section style="--surface-bg: var(--color-primary-50);">
+
+<!-- ✗ Never do this -->
+<div style="display: flex; gap: 16px;">
+```
+
+---
+
+## Why PDS Exists
+
+| The Old Way | The PDS Way |
+|-------------|-------------|
+| `class="flex items-center gap-4 p-6 bg-white rounded-lg shadow-md"` | `class="card"` |
+| `style="color: #007acc;"` | Uses `--color-primary-500` token |
+| Import a Button component | `<button class="btn-primary">` |
+| 47 utility classes per element | Semantic class + maybe one layout utility |
+
+**The result:** Readable HTML. Inspectable CSS. Sites that work without JS. Code that lasts decades.
+
+PDS follows the [Pure Web Manifesto](https://pureweb.dev/manifesto)—sustainable architecture for long-lived applications.
+
+---
+
+## Key Features
+
+- 🎨 **Configuration-Driven** — Single source of truth generates everything
+- 🚀 **Live or Static** — Runtime generation or pre-built bundles
+- 🎯 **Framework Agnostic** — Vanilla, Lit, React, Vue, Svelte, Next.js
+- 🌐 **Web Standards** — EventTarget API, Constructable Stylesheets, Shadow DOM
+- 🧩 **Progressive Enhancement** — Semantic HTML first, enhance where needed
+- ♿ **Accessibility Built-in** — WCAG AA validation, contrast checking
+- 📦 **Zero Build Required** — Works directly in browsers
+- 📋 **IDE IntelliSense** — Full autocomplete via Custom Elements Manifest
 
 ---
 
 ## Table of Contents
 
-- [What is This?](#what-is-this)
+- [The Three Layers](#the-three-layers)
 - [Who is it For?](#who-is-it-for)
 - [Getting Started](#getting-started)
 - [Core Architecture](#core-architecture)
-  - [1. Style Generation & Injection](#1-style-generation--injection)
-  - [2. Progressive Enhancements](#2-progressive-enhancements)
-  - [3. Web Components](#3-web-components)
 - [Styling Layers](#styling-layers)
 - [Shadow DOM Adoption](#shadow-dom-adoption)
 - [Icon System](#icon-system)
@@ -81,40 +132,47 @@ await PDS.start(config);
 
 ---
 
-## What is This?
-
-Pure Design System is based on the [Pure Web Manifesto](https://pureweb.dev/manifesto).
-
-It transforms configuration into complete design systems using three integrated pillars:
-
-### 1. **Generated Styles** (Tokens → CSS)
-Your config defines design intent. PDS generates (in a deterministic way):
-- **Color scales** (50-900 shades from base colors)
-- **Surface semantics** (bg, text, border, shadow, interactive states)
-- **Spacing tokens** (mathematical progression)
-- **Typography scales** (modular scale from base size)
-- **Component primitives** (buttons, forms, cards, badges)
-- **Utility classes** (layout, borders, effects)
-
-### 2. **Progressive Enhancements** (Lightweight DOM behaviors)
-Semantic HTML gets enhanced with JavaScript:
-- **Dropdowns** - `<nav data-dropdown>` auto-enhanced
-- **Toggles** - `<label data-toggle>` becomes switches
-- **Range sliders** - Value bubbles and visual feedback
-- **Required fields** - Automatic asterisks and validation hints
-- **Custom enhancements** - Extensible system for your patterns
-
-### 3. **Web Components** (Rich UI, lazy-loaded using [AutoDefiner](https://www.npmjs.com/package/pure-web#user-content-autodefiner))
-Optional components loaded on demand:
-- `<pds-icon>` - SVG sprite icons
-- `<pds-drawer>` - Slide-out panels (top, bottom, lef, right)
-- `<pds-tabstrip>` - Accessible tabs 
-- `<pds-upload>` - File upload with drag & drop and preview
-- `<pds-toaster>` - Smart Toast notifications
-- `<pds-richtext>` - Rich text editor (prefers `#showdown` import map; `format="markdown"` keeps Markdown values)
-- `<pds-jsonform>` - Dynamic forms generated from JSON Schema 
-- `<pds-splitpanel>` - Resizable panes
-- `<pds-scrollrow>` - Horizontal scrolling containers
+## The Three Layers
+
+PDS is built on **three fully optional layers**, each powered by your config:
+
+### 1. Styles — Deterministic Global CSS
+
+Your config generates:
+- **Color scales** (50–900 from base colors)
+- **Surface semantics** (bg, text, border, shadow, states)
+- **Spacing system** (mathematical progression)
+- **Typography scale** (modular scale from base)
+- **Primitives** (`.btn-primary`, `.card`, `.badge`)
+- **Utilities** (`.flex`, `.gap-md`, `.stack-lg`)
+
+All exported as CSS Custom Properties. Zero specificity via `:where()`.
+Same values available in JS via `PDS.compiled.tokens`.
+
+### 2. Enhancements — Semantic HTML Made Powerful
+
+Optional selector-based upgrades that run in Light DOM and Shadow DOM:
+- Required fields show markers and help text automatically
+- `<label data-toggle>` becomes a switch
+- `<nav data-dropdown>` gets dropdown behavior
+- `<dialog>` gets better focus management
+- Form elements gain consistent theming
+
+**Think: HTML → UX upgrades, zero integration work.**
+
+### 3. Components — Auto-defined, Lazy-loaded Web Components
+
+A growing set of PDS components:
+- `<pds-icon>` — SVG sprite icons
+- `<pds-drawer>` — Slide-out panels
+- `<pds-tabstrip>` — Accessible tabs
+- `<pds-jsonform>` — Forms from JSON Schema
+- `<pds-upload>` — Drag & drop file upload
+- `<pds-richtext>` — Rich text / Markdown editor
+- `<pds-splitpanel>` — Resizable panes
+- `<pds-toaster>` — Toast notifications
+
+Auto-defined when used. Lazy-loaded via dynamic imports. Styled by your tokens. Zero dependencies.
 
 ### How It Works
 
@@ -146,7 +204,7 @@ Optional components loaded on demand:
 │ Tokens:      --color-primary-500, --spacing-4                │
 │ Primitives:  .btn-primary, .card, .badge                     │
 │ Components:  <pds-drawer>, <pds-icon>                        │
-│ Utilities:   .flex, .gap-4, .border-gradient                 │
+│ Utilities:   .flex, .gap-md, .border-gradient                │
 └──────────────────────────────────────────────────────────────┘
 ```