@pure-ds/core 0.4.22 → 0.4.24

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

@@ -304,7 +304,7 @@ class PdsDrawer extends HTMLElement {
           width: 100%; max-width: 100%;
           margin: 0;
           border-radius: var(--drawer-radius, var(--radius-lg));
-          overflow: clip; contain: layout paint style; will-change: transform;
+          overflow: visible; contain: layout style; will-change: transform;
           touch-action: none;
           outline: none;
         }

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

@@ -11,7 +11,7 @@ function getStep(value) {
 // Default options for pds-form
 const DEFAULT_OPTIONS = {
   widgets: {
-    booleans: "toggle", // 'toggle' | 'checkbox'
+    booleans: "toggle", // 'toggle' | 'toggle-with-icons' | 'checkbox'
     numbers: "input", // 'input' | 'range'
     selects: "standard", // 'standard' | 'dropdown'
   },
@@ -669,10 +669,9 @@ export class SchemaForm extends LitElement {
       return useRange ? "input-range" : "input-number";
     }
     if (schema.type === "boolean") {
-      // Check if toggle should be used
-      const useToggle =
-        this.#getOption("widgets.booleans", "toggle") === "toggle";
-      return useToggle ? "toggle" : "checkbox";
+      // Return the actual boolean widget type
+      const booleanWidget = this.#getOption("widgets.booleans", "toggle");
+      return booleanWidget === "checkbox" ? "checkbox" : booleanWidget;
     }
     return "input-text";
   }
@@ -1489,14 +1488,20 @@ export class SchemaForm extends LitElement {
       this.#emit("pw:after-render-field", { path, schema: node.schema })
     );
 
-    // Add data-toggle for toggle switches
-    const isToggle = node.widgetKey === "toggle";
+    // Add data-toggle for toggle switches (both toggle and toggle-with-icons)
+    const isToggle = node.widgetKey === "toggle" || node.widgetKey === "toggle-with-icons";
+    const useIconToggle = node.widgetKey === "toggle-with-icons";
 
     // Add range-output class for range inputs if enabled
     const isRange = node.widgetKey === "input-range";
     const useRangeOutput =
       isRange && this.#getOption("enhancements.rangeOutput", true);
-    const labelClass = useRangeOutput ? "range-output" : undefined;
+    
+    // Build class list for label
+    const labelClasses = [];
+    if (useRangeOutput) labelClasses.push("range-output");
+    if (useIconToggle) labelClasses.push("with-icons");
+    const labelClass = labelClasses.length > 0 ? labelClasses.join(" ") : undefined;
 
     const renderControlAndLabel = (isToggle) => {
       if (isToggle) return html`${controlTpl} <span data-label>${label}</span>`;
@@ -1855,6 +1860,22 @@ export class SchemaForm extends LitElement {
       `
     );
 
+    // Toggle switch with icons (same as toggle, styling comes from .with-icons class on label)
+    this.defineRenderer(
+      "toggle-with-icons",
+      ({ id, path, value, attrs, set }) => html`
+        <input
+          id=${id}
+          name=${path}
+          type="checkbox"
+          .checked=${!!value}
+          ?disabled=${!!attrs.disabled}
+          ?required=${!!attrs.required}
+          @change=${(e) => set(!!e.target.checked)}
+        />
+      `
+    );
+
     this.defineRenderer(
       "select",
       ({ id, path, value, attrs, set, schema, ui, host }) => {

package/readme.md

@@ -246,10 +246,18 @@ Auto-defined when used. Lazy-loaded via dynamic imports. Styled by your tokens.
 npm install @pure-ds/core
 ```
 
-Assets (components, icons) are auto-copied to your project during install. To manually sync:
+**Post-install automation:**
+
+During installation, PDS automatically:
+- Creates a default `pds.config.js` (if one doesn't exist)
+- Copies Copilot/AI instructions to `.github/copilot-instructions.md`
+- Adds `pds:export` and `pds:build-icons` scripts to your `package.json`
+- Runs `pds:export` to generate static assets
+
+To manually re-sync assets:
 
 ```bash
-node node_modules/@pure-ds/core/packages/pds-cli/bin/postinstall.js
+npm run pds:export
 ```
 
 ### Lit Import Convention
@@ -1560,6 +1568,27 @@ await PDS.start({ design: myPreset });
 | `npm run pds:css-data` | Generate CSS IntelliSense (tokens, classes, attributes) |
 | `npm run pds:build-icons` | Build custom icon sprite |
 | `npm run sync-assets` | Sync assets between locations |
+| `npx pds-init-config` | Create default `pds.config.js` with helpful examples |
+
+### Initialize Configuration
+
+Create a starter `pds.config.js` file with commented examples:
+
+```bash
+# Create config in current directory
+npx pds-init-config
+
+# Force overwrite existing config
+npx pds-init-config --force
+```
+
+This generates a `pds.config.js` with:
+- Basic `mode` and `preset` settings
+- Commented examples for design token overrides
+- Template for custom progressive enhancers
+- Template for lazy-loaded component configuration
+
+**Note:** During `npm install`, PDS automatically creates this file if it doesn't exist.
 
 ### Export Static Assets
 
@@ -1859,10 +1888,61 @@ export default {
 ### Components Not Loading
 
 1. Verify components directory exists
-2. Check import map for `#pds/lit`
+2. Check import map for `#pds/lit` (required for Lit components - see below)
 3. Manually sync: `node node_modules/pure-ds/packages/pds-cli/bin/postinstall.js`
 4. Check browser console for errors
 
+### Lit Components Not Working
+
+**Symptoms:** `<pds-form>` or other Lit-based components fail to load with module resolution errors.
+
+**Components requiring Lit:**
+- `<pds-form>` - JSON Schema forms
+- `<pds-drawer>` - Drawer/sidebar panels
+
+**Solution:** Add import map to your HTML `<head>`:
+
+```html
+<script type="importmap">
+{
+  "imports": {
+    "#pds/lit": "/assets/js/lit.js"
+  }
+}
+</script>
+```
+
+Or in bundlers (Vite, Webpack, etc.):
+
+```javascript
+// vite.config.js
+export default {
+  resolve: {
+    alias: { '#pds/lit': 'lit' }
+  }
+};
+
+// webpack.config.js
+module.exports = {
+  resolve: {
+    alias: { '#pds/lit': 'lit' }
+  }
+};
+```
+
+**Note:** Wait for components to load before accessing their APIs:
+
+```javascript
+// ❌ Don't do this
+const form = document.querySelector('pds-form');
+form.getFormData(); // May fail if component not loaded yet
+
+// ✅ Do this instead
+await customElements.whenDefined('pds-form');
+const form = document.querySelector('pds-form');
+form.getFormData(); // Safe
+```
+
 ### Flash of Unstyled Content
 
 ```javascript

package/src/js/pds-core/pds-config.js

@@ -737,7 +737,6 @@ export const presets = {
       "Data-dense business intelligence app interface with organized hierarchy and professional polish",
     options: {
       liquidGlassEffects: false,
-      backgroundMesh: 2,
     },
     colors: {
       primary: "#0066cc", // corporate blue for primary actions
@@ -815,7 +814,7 @@ presets.default = {
   form: {
     options: {
       widgets: {
-        booleans: "toggle",      // 'toggle' | 'checkbox'
+        booleans: "toggle",      // 'toggle' | 'toggle-with-icons' | 'checkbox'
         numbers: "input",        // 'input' | 'range'
         selects: "standard",     // 'standard' | 'dropdown'
       },

package/src/js/pds-core/pds-generator.js

@@ -1923,6 +1923,12 @@ label {
   line-height: var(--font-line-height-relaxed);
 }
 
+input, textarea, select {
+  &:focus {
+    outline: none;
+  }
+}
+
 input, textarea, select {
   width: 100%;
   min-height: ${minInputHeight}px;
@@ -1940,11 +1946,7 @@ input, textarea, select {
   -webkit-appearance: none;
   
   &:focus {
-    outline: none;
     border-color: var(--color-primary-500);
-    box-shadow: 0 0 0 ${focusWidth}px color-mix(in oklab, var(--color-primary-500) ${Math.round(
-      (focusRingOpacity || 0.3) * 100
-    )}%, transparent);
     background-color: var(--color-surface-base);
   }
   
@@ -2324,6 +2326,25 @@ label[data-toggle] {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   }
 
+  /* Icons in toggle knob (opt-in via .with-icons class) */
+  &.with-icons .toggle-knob::before {
+    content: "✕";
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: bold;
+    color: var(--color-gray-600);
+    transition: opacity 200ms ease;
+  }
+
+  &.with-icons:has(input[type="checkbox"]:checked) .toggle-knob::before {
+    content: "✓";
+    color: var(--color-primary-600);
+  }
+
   /* Toggle switch when checked - using :has() selector */
   &:has(input[type="checkbox"]:checked) .toggle-switch {
     background-color: var(--color-primary-fill);
@@ -2887,15 +2908,28 @@ tbody {
     cursor: pointer;
     padding: var(--spacing-3) var(--spacing-4);
     list-style: none;
-    outline: none;
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
+    border-radius: var(--radius-sm);
+    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
 
     &::-webkit-details-marker {
       display: none;
     }
 
+    &:hover {
+      background-color: var(--color-surface-subtle);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 30%, transparent);
+    }
+
     /* Chevron indicator */
     &::after {
       content: "";
@@ -3628,6 +3662,13 @@ nav[data-dropdown] {
   white-space: nowrap;
 }
 
+/* Required Legend Utility */
+:where(.required-legend) {
+  display: block;
+  margin: var(--spacing-3) 0;
+  color: var(--color-text-muted);
+}
+
 /* Max-width utilities */
 .max-w-sm { max-width: 400px; } .max-w-md { max-width: 600px; } .max-w-lg { max-width: 800px; } .max-w-xl { max-width: 1200px; }
 

package/src/js/pds.js

@@ -961,10 +961,27 @@ async function __setupAutoDefinerAndEnhancers(options) {
       enhancers: mergedEnhancers,
       onError: (tag, err) => {
         if (typeof tag === "string" && tag.startsWith("pds-")) {
-          // No config available in this context, using console
-          console.warn(
-            `⚠️ PDS component <${tag}> not found. Assets may not be installed.`
-          );
+          // Check if this is a Lit-dependent component with missing #pds/lit import map
+          const litDependentComponents = ['pds-form', 'pds-drawer'];
+          const isLitComponent = litDependentComponents.includes(tag);
+          const isMissingLitError = err?.message?.includes('#pds/lit') || 
+                                     err?.message?.includes('Failed to resolve module specifier');
+          
+          if (isLitComponent && isMissingLitError) {
+            console.error(
+              `❌ PDS component <${tag}> requires Lit but #pds/lit is not in import map.\n` +
+              `Add this to your HTML <head>:\n` +
+              `<script type="importmap">\n` +
+              `  { "imports": { "#pds/lit": "./path/to/lit.js" } }\n` +
+              `</script>\n` +
+              `See: https://github.com/pure-ds/core#lit-components`
+            );
+          } else {
+            // Generic component not found warning
+            console.warn(
+              `⚠️ PDS component <${tag}> not found. Assets may not be installed.`
+            );
+          }
         } else {
           console.error(`❌ Auto-define error for <${tag}>:`, err);
         }