@pure-ds/storybook 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/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);
         }

package/stories/GettingStarted.md

@@ -10,12 +10,26 @@ From zero to hero with PDS.
 npm install @pure-ds/core
 ```
 
-Create `pds.config.js`: 
+**What happens during install:**
+
+PDS automatically sets up your project:
+- ✅ Creates `pds.config.js` with commented examples (if it doesn't exist)
+- ✅ Exports static assets to your web root (components, icons, styles)
+- ✅ Copies AI/Copilot instructions to `.github/copilot-instructions.md`
+- ✅ Adds helper scripts to your `package.json` (`pds:export`, `pds:build-icons`)
+
+The generated `pds.config.js` includes:
 
 ```javascript
+// pds.config.js (auto-generated)
 export const config = {
   mode: "live",
-  preset: "default"
+  preset: "default",
+
+  // Uncomment and customize as needed:
+  // design: { colors: { primary: '#007acc' } },
+  // enhancers: [ /* custom enhancements */ ],
+  // autoDefine: { predefine: ['pds-icon'] }
 }
 ```
 
@@ -23,11 +37,21 @@ Then initialize in your app:
 
 ```javascript
 import { PDS } from '@pure-ds/core';
-import { config } from "../../pds.config.js"; // change to match location (project root)
+import { config } from "./pds.config.js"; // project root
 
 await PDS.start(config); // That's it! Start writing semantic HTML.
 ```
 
+**Manual config generation:**
+
+```bash
+# Create or regenerate config with examples
+npx pds-init-config
+
+# Force overwrite existing config
+npx pds-init-config --force
+```
+
 ### Option B: CDN (Zero Install)
 
 Perfect for quick prototypes and learning:

package/stories/components/PdsDrawer.stories.js

@@ -190,9 +190,7 @@ export const AllPositions = () => {
     <pds-drawer id="drawer-right" position="right">
       <div slot="drawer-header" class="flex items-center justify-between">
         <h2>Filter & Sort</h2>
-        <button id="close-drawer-right" class="icon-only btn-outline btn-sm">
-          <pds-icon icon="x" label="Close"></pds-icon>
-        </button>
+        
       </div>
       <div slot="drawer-content" class="stack-md">
         <p>
@@ -320,7 +318,7 @@ export const AllPositions = () => {
     
     <pds-drawer id="drawer-bottom" position="bottom">
       <div slot="drawer-header" class="flex items-center gap-md">
-        <pds-icon icon="toolbox" size="lg"></pds-icon>
+        <pds-icon icon="gear" size="lg"></pds-icon>
         <h2>Quick Actions</h2>
       </div>
       <div slot="drawer-content" class="stack-md">