@pure-ds/core 0.6.10 → 0.7.1

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 (132) hide show
  1. package/.github/copilot-instructions.md +6 -1
  2. package/custom-elements.json +803 -16
  3. package/dist/types/pds.d.ts +1 -0
  4. package/dist/types/public/assets/js/pds-ask.d.ts +2 -0
  5. package/dist/types/public/assets/js/pds-ask.d.ts.map +1 -0
  6. package/dist/types/public/assets/js/pds-auto-definer.d.ts +14 -0
  7. package/dist/types/public/assets/js/pds-auto-definer.d.ts.map +1 -0
  8. package/dist/types/public/assets/js/pds-autocomplete.d.ts +79 -0
  9. package/dist/types/public/assets/js/pds-autocomplete.d.ts.map +1 -0
  10. package/dist/types/public/assets/js/pds-enhancers.d.ts +7 -0
  11. package/dist/types/public/assets/js/pds-enhancers.d.ts.map +1 -0
  12. package/dist/types/public/assets/js/pds-manager.d.ts +98 -1
  13. package/dist/types/public/assets/js/pds-manager.d.ts.map +1 -1
  14. package/dist/types/public/assets/js/pds-toast.d.ts +8 -0
  15. package/dist/types/public/assets/js/pds-toast.d.ts.map +1 -0
  16. package/dist/types/public/assets/js/pds.d.ts.map +1 -1
  17. package/dist/types/public/assets/pds/components/pds-drawer.d.ts +1 -143
  18. package/dist/types/public/assets/pds/components/pds-drawer.d.ts.map +1 -1
  19. package/dist/types/public/assets/pds/components/pds-form.d.ts.map +1 -1
  20. package/dist/types/public/assets/pds/components/pds-icon.d.ts.map +1 -1
  21. package/dist/types/public/assets/pds/components/pds-live-converter.d.ts +8 -0
  22. package/dist/types/public/assets/pds/components/pds-live-converter.d.ts.map +1 -0
  23. package/dist/types/public/assets/pds/components/pds-live-importer.d.ts +2 -0
  24. package/dist/types/public/assets/pds/components/pds-live-importer.d.ts.map +1 -0
  25. package/dist/types/public/assets/pds/components/pds-live-template-canvas.d.ts +2 -0
  26. package/dist/types/public/assets/pds/components/pds-live-template-canvas.d.ts.map +1 -0
  27. package/dist/types/public/assets/pds/components/pds-omnibox.d.ts.map +1 -1
  28. package/dist/types/public/assets/pds/components/pds-richtext.d.ts.map +1 -1
  29. package/dist/types/public/assets/pds/components/pds-scrollrow.d.ts +1 -63
  30. package/dist/types/public/assets/pds/components/pds-scrollrow.d.ts.map +1 -1
  31. package/dist/types/public/assets/pds/components/pds-splitpanel.d.ts +1 -89
  32. package/dist/types/public/assets/pds/components/pds-splitpanel.d.ts.map +1 -1
  33. package/dist/types/public/assets/pds/components/pds-theme.d.ts +1 -22
  34. package/dist/types/public/assets/pds/components/pds-theme.d.ts.map +1 -1
  35. package/dist/types/public/assets/pds/components/pds-toaster.d.ts +1 -1
  36. package/dist/types/public/assets/pds/components/pds-toaster.d.ts.map +1 -1
  37. package/dist/types/public/assets/pds/components/pds-treeview.d.ts +37 -0
  38. package/dist/types/public/assets/pds/components/pds-treeview.d.ts.map +1 -0
  39. package/dist/types/public/assets/pds/components/pds-upload.d.ts.map +1 -1
  40. package/dist/types/src/js/common/ask.d.ts.map +1 -1
  41. package/dist/types/src/js/common/toast.d.ts +8 -0
  42. package/dist/types/src/js/common/toast.d.ts.map +1 -1
  43. package/dist/types/src/js/pds-ask.d.ts +2 -0
  44. package/dist/types/src/js/pds-ask.d.ts.map +1 -0
  45. package/dist/types/src/js/pds-auto-definer.d.ts +2 -0
  46. package/dist/types/src/js/pds-auto-definer.d.ts.map +1 -0
  47. package/dist/types/src/js/pds-autocomplete.d.ts +2 -0
  48. package/dist/types/src/js/pds-autocomplete.d.ts.map +1 -0
  49. package/dist/types/src/js/pds-core/pds-enhancers.d.ts.map +1 -1
  50. package/dist/types/src/js/pds-core/pds-generator.d.ts.map +1 -1
  51. package/dist/types/src/js/pds-core/pds-live.d.ts +2 -1
  52. package/dist/types/src/js/pds-core/pds-live.d.ts.map +1 -1
  53. package/dist/types/src/js/pds-core/pds-start-helpers.d.ts.map +1 -1
  54. package/dist/types/src/js/pds-enhancers.d.ts +2 -0
  55. package/dist/types/src/js/pds-enhancers.d.ts.map +1 -0
  56. package/dist/types/src/js/pds-live-manager/conversion-service.d.ts +66 -0
  57. package/dist/types/src/js/pds-live-manager/conversion-service.d.ts.map +1 -0
  58. package/dist/types/src/js/pds-live-manager/import-contract.d.ts +15 -0
  59. package/dist/types/src/js/pds-live-manager/import-contract.d.ts.map +1 -0
  60. package/dist/types/src/js/pds-live-manager/import-history-service.d.ts +32 -0
  61. package/dist/types/src/js/pds-live-manager/import-history-service.d.ts.map +1 -0
  62. package/dist/types/src/js/pds-live-manager/import-service.d.ts +21 -0
  63. package/dist/types/src/js/pds-live-manager/import-service.d.ts.map +1 -0
  64. package/dist/types/src/js/pds-live-manager/template-service.d.ts +17 -0
  65. package/dist/types/src/js/pds-live-manager/template-service.d.ts.map +1 -0
  66. package/dist/types/src/js/pds-manager.d.ts +4 -0
  67. package/dist/types/src/js/pds-toast.d.ts +2 -0
  68. package/dist/types/src/js/pds-toast.d.ts.map +1 -0
  69. package/dist/types/src/js/pds.d.ts.map +1 -1
  70. package/package.json +11 -5
  71. package/packages/pds-cli/README.md +60 -0
  72. package/packages/pds-cli/bin/pds-import.js +176 -0
  73. package/packages/pds-cli/bin/pds-static.js +27 -1
  74. package/packages/pds-cli/bin/postinstall.mjs +17 -8
  75. package/packages/pds-cli/bin/templates/bootstrap/pds.config.js +1 -5
  76. package/packages/pds-cli/bin/templates/bootstrap/public/index.html +2 -1
  77. package/packages/pds-cli/bin/templates/starter-templates.js +1 -3
  78. package/public/assets/js/app.js +9 -163
  79. package/public/assets/js/pds-ask.js +25 -0
  80. package/public/assets/js/pds-auto-definer.js +1 -0
  81. package/public/assets/js/pds-autocomplete.js +7 -0
  82. package/public/assets/js/pds-enhancers.js +1 -0
  83. package/public/assets/js/pds-manager.js +370 -267
  84. package/public/assets/js/pds-toast.js +1 -0
  85. package/public/assets/js/pds.js +2 -32
  86. package/public/assets/pds/components/pds-calendar.js +2 -2
  87. package/public/assets/pds/components/pds-drawer.js +1 -1
  88. package/public/assets/pds/components/pds-form.js +7 -6
  89. package/public/assets/pds/components/pds-icon.js +12 -9
  90. package/public/assets/pds/components/pds-live-converter.js +47 -0
  91. package/public/assets/pds/components/pds-live-edit.js +758 -44
  92. package/public/assets/pds/components/pds-live-importer.js +773 -0
  93. package/public/assets/pds/components/pds-live-template-canvas.js +172 -0
  94. package/public/assets/pds/components/pds-omnibox.js +147 -3
  95. package/public/assets/pds/components/pds-richtext.js +2 -0
  96. package/public/assets/pds/components/pds-scrollrow.js +61 -2
  97. package/public/assets/pds/components/pds-splitpanel.js +3 -1
  98. package/public/assets/pds/components/pds-theme.js +2 -0
  99. package/public/assets/pds/components/pds-toaster.js +52 -5
  100. package/public/assets/pds/components/pds-treeview.js +974 -0
  101. package/public/assets/pds/components/pds-upload.js +2 -0
  102. package/public/assets/pds/core/pds-ask.js +25 -0
  103. package/public/assets/pds/core/pds-auto-definer.js +1 -0
  104. package/public/assets/pds/core/pds-autocomplete.js +7 -0
  105. package/public/assets/pds/core/pds-enhancers.js +1 -0
  106. package/public/assets/pds/core/pds-manager.js +3646 -0
  107. package/public/assets/pds/core/pds-toast.js +1 -0
  108. package/public/assets/pds/core.js +2 -0
  109. package/public/assets/pds/custom-elements.json +803 -16
  110. package/public/assets/pds/pds-css-complete.json +7 -2
  111. package/public/assets/pds/templates/commerce-scroll-explorer.html +115 -0
  112. package/public/assets/pds/templates/content-brand-showcase.html +110 -0
  113. package/public/assets/pds/templates/feedback-ops-dashboard.html +91 -0
  114. package/public/assets/pds/templates/release-readiness-radar.html +69 -0
  115. package/public/assets/pds/templates/support-command-center.html +92 -0
  116. package/public/assets/pds/templates/templates.json +53 -0
  117. package/public/assets/pds/templates/workspace-settings-lab.html +131 -0
  118. package/public/assets/pds/vscode-custom-data.json +54 -4
  119. package/readme.md +38 -1
  120. package/src/js/pds-core/pds-config.js +9 -9
  121. package/src/js/pds-core/pds-enhancers.js +146 -0
  122. package/src/js/pds-core/pds-generator.js +170 -29
  123. package/src/js/pds-core/pds-live.js +456 -13
  124. package/src/js/pds-core/pds-start-helpers.js +5 -1
  125. package/src/js/pds-live-manager/conversion-service.js +3135 -0
  126. package/src/js/pds-live-manager/import-contract.js +57 -0
  127. package/src/js/pds-live-manager/import-history-service.js +145 -0
  128. package/src/js/pds-live-manager/import-service.js +255 -0
  129. package/src/js/pds-live-manager/tailwind-conversion-rules.json +383 -0
  130. package/src/js/pds-live-manager/template-service.js +170 -0
  131. package/src/js/pds.d.ts +1 -0
  132. package/src/js/pds.js +192 -12
@@ -2274,6 +2274,11 @@
2274
2274
  "description": "Enhancement: label[data-toggle]",
2275
2275
  "category": "Data Enhancements"
2276
2276
  },
2277
+ {
2278
+ "name": "data-color",
2279
+ "description": "Enhancement: label[data-color]",
2280
+ "category": "Data Enhancements"
2281
+ },
2277
2282
  {
2278
2283
  "name": "data-open",
2279
2284
  "description": "Enhancement: fieldset[role=group][data-open]",
@@ -2287,9 +2292,9 @@
2287
2292
  ],
2288
2293
  "metadata": {
2289
2294
  "generator": "PDS CSS Data Generator",
2290
- "generatedAt": "2026-02-18T13:01:52.698Z",
2295
+ "generatedAt": "2026-02-21T10:01:05.385Z",
2291
2296
  "totalProperties": 169,
2292
2297
  "totalClasses": 169,
2293
- "totalAttributes": 4
2298
+ "totalAttributes": 5
2294
2299
  }
2295
2300
  }
@@ -0,0 +1,115 @@
1
+ <section class="stack-lg" aria-label="Commerce Scroll Explorer">
2
+ <header class="card surface-elevated stack-sm border-gradient border-glow">
3
+ <div class="flex justify-between items-center gap-sm">
4
+ <div class="stack-xs">
5
+ <h2>Commerce Scroll Explorer</h2>
6
+ <p class="text-muted">Quickly inspect color, spacing, and typography impact across product UI patterns.</p>
7
+ </div>
8
+ <nav data-dropdown class="align-right" data-mode="auto">
9
+ <button class="btn-outline btn-sm">
10
+ <pds-icon icon="list" size="sm"></pds-icon>
11
+ Actions
12
+ </button>
13
+ <menu>
14
+ <li><a href="#refresh"><pds-icon icon="arrow-right" size="sm"></pds-icon>Refresh feed</a></li>
15
+ <li><a href="#publish"><pds-icon icon="rocket" size="sm"></pds-icon>Publish</a></li>
16
+ <li><a href="#share"><pds-icon icon="share" size="sm"></pds-icon>Share</a></li>
17
+ </menu>
18
+ </nav>
19
+ </div>
20
+ <div class="flex gap-sm flex-wrap">
21
+ <button class="btn-primary">Primary CTA</button>
22
+ <button class="btn-secondary">Secondary CTA</button>
23
+ <button class="btn-outline">Outline CTA</button>
24
+ <button class="btn-primary btn-working" type="button" aria-live="polite">Working State</button>
25
+ </div>
26
+ </header>
27
+
28
+ <section class="stack-sm">
29
+ <h3>Featured products (pds-scrollrow)</h3>
30
+ <pds-scrollrow snap="start" tile-min="250px" tile-max="320px">
31
+ <article class="card surface-base stack-sm border-gradient">
32
+ <img class="img-gallery" src="https://picsum.photos/280/200?random=401" alt="Starter Kit product" loading="lazy" />
33
+ <h4>Aurora Headphones</h4>
34
+ <p class="text-muted">Wireless studio sound with all-day comfort.</p>
35
+ <div class="flex justify-between items-center">
36
+ <strong>$89</strong>
37
+ <button class="btn-primary btn-sm">Add</button>
38
+ </div>
39
+ </article>
40
+ <article class="card surface-elevated stack-sm border-glow">
41
+ <img class="img-gallery" src="https://picsum.photos/280/200?random=402" alt="Growth Bundle product" loading="lazy" />
42
+ <h4>Trail Pro Backpack</h4>
43
+ <p class="text-muted">Weather-ready carry with modular compartments.</p>
44
+ <div class="flex justify-between items-center">
45
+ <strong>$119</strong>
46
+ <button class="btn-primary btn-sm">Add</button>
47
+ </div>
48
+ </article>
49
+ <article class="card surface-subtle stack-sm">
50
+ <img class="img-gallery" src="https://picsum.photos/280/200?random=403" alt="Scale Pack product" loading="lazy" />
51
+ <h4>DeskLight Mini</h4>
52
+ <p class="text-muted">Adaptive brightness for focused workspaces.</p>
53
+ <div class="flex justify-between items-center">
54
+ <strong>$69</strong>
55
+ <button class="btn-primary btn-sm">Add</button>
56
+ </div>
57
+ </article>
58
+ <article class="card surface-overlay stack-sm border-gradient">
59
+ <img class="img-gallery" src="https://picsum.photos/280/200?random=404" alt="Premium Suite product" loading="lazy" />
60
+ <h4>Urban Runner</h4>
61
+ <p class="text-muted">High-cushion sneakers for city commutes.</p>
62
+ <div class="flex justify-between items-center">
63
+ <strong>$149</strong>
64
+ <button class="btn-primary btn-sm">Add</button>
65
+ </div>
66
+ </article>
67
+ <article class="card surface-base stack-sm">
68
+ <img class="img-gallery" src="https://picsum.photos/280/200?random=405" alt="Insight Add-on product" loading="lazy" />
69
+ <h4>Ceramic Brew Set</h4>
70
+ <p class="text-muted">Minimal pour-over set for smooth mornings.</p>
71
+ <div class="flex justify-between items-center">
72
+ <strong>$54</strong>
73
+ <button class="btn-primary btn-sm">Add</button>
74
+ </div>
75
+ </article>
76
+ </pds-scrollrow>
77
+ </section>
78
+
79
+ <section class="grid grid-auto-md gap-md">
80
+ <article class="card surface-sunken stack-sm">
81
+ <h4>Interactive states</h4>
82
+ <p class="text-muted">Hover/focus/active contrast check.</p>
83
+ <div class="flex gap-sm flex-wrap">
84
+ <button class="btn-primary btn-sm">Hover</button>
85
+ <button class="btn-secondary btn-sm">Focus</button>
86
+ <button class="btn-outline btn-sm">Active</button>
87
+ </div>
88
+ </article>
89
+ <article class="card surface-elevated stack-sm border-glow">
90
+ <h4>Context card</h4>
91
+ <blockquote>
92
+ “Tuning one token should visibly cascade through typography, spacing, and component depth.”
93
+ </blockquote>
94
+ <small class="text-muted">Design QA principle</small>
95
+ </article>
96
+ </section>
97
+
98
+ <section class="card surface-base stack-sm">
99
+ <h3>Quick FAQ (Accordion)</h3>
100
+ <section class="accordion" aria-label="Commerce FAQ">
101
+ <details>
102
+ <summary id="commerce-faq-1">How do prices react to typography scale changes?</summary>
103
+ <div role="region" aria-labelledby="commerce-faq-1">
104
+ <p>Headings, labels, and price emphasis adapt via global type and spacing tokens.</p>
105
+ </div>
106
+ </details>
107
+ <details>
108
+ <summary id="commerce-faq-2">What should I watch when changing surface settings?</summary>
109
+ <div role="region" aria-labelledby="commerce-faq-2">
110
+ <p>Check card boundaries, elevation readability, and icon contrast in light/dark themes.</p>
111
+ </div>
112
+ </details>
113
+ </section>
114
+ </section>
115
+ </section>
@@ -0,0 +1,110 @@
1
+ <section class="stack-lg" aria-label="Content and Brand Showcase">
2
+ <header class="card surface-inverse stack-sm border-gradient">
3
+ <h2>Content & Brand Showcase</h2>
4
+ <p>Evaluate typography rhythm, semantic content, callouts, and surface contrast as design tokens evolve.</p>
5
+ </header>
6
+
7
+ <article class="card surface-inverse border-gradient stack-md text-center items-center">
8
+ <header class="stack-xs text-center items-center">
9
+ <h2>Brand Direction Hero</h2>
10
+ <p class="text-muted">A quick visual anchor to evaluate typography, contrast, and surface behavior at a glance.</p>
11
+ </header>
12
+ <img class="img-gallery" src="https://picsum.photos/1200/520?random=510" alt="Abstract brand hero graphic" loading="lazy" />
13
+ </article>
14
+
15
+ <section class="grid grid-auto-md gap-md">
16
+ <article class="card surface-base stack-md">
17
+ <h3>Editorial card</h3>
18
+ <p class="text-muted">Body copy and supporting text should stay readable under all palette settings.</p>
19
+ <blockquote>
20
+ “A robust design canvas makes early-stage tuning possible before product UIs are complete.”
21
+ </blockquote>
22
+ <p>
23
+ Teams can compare heading scale, line-height, and color contrast in realistic content blocks without
24
+ waiting for full feature implementation.
25
+ </p>
26
+ <div class="flex gap-sm">
27
+ <button class="btn-primary">Read article</button>
28
+ <button class="btn-outline">Bookmark</button>
29
+ </div>
30
+ </article>
31
+
32
+ <article class="card surface-elevated stack-md border-glow">
33
+ <h3>Smart surfaces stack</h3>
34
+ <div class="card surface-subtle stack-sm">
35
+ <h4>Subtle level</h4>
36
+ <p class="text-muted">Text and icon contrast adapts to surface context.</p>
37
+ <div class="card surface-overlay stack-sm">
38
+ <h5>Overlay level</h5>
39
+ <p>Nested surfaces help evaluate depth and hierarchy consistency.</p>
40
+ <div class="card surface-sunken stack-xs">
41
+ <small>Sunken level for inset content and metadata.</small>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </article>
46
+ </section>
47
+
48
+ <section class="grid grid-auto-md gap-md">
49
+ <article class="card surface-base stack-sm">
50
+ <h3>Category dropdown</h3>
51
+ <nav data-dropdown data-mode="auto">
52
+ <button class="btn-secondary">
53
+ <pds-icon icon="list" size="sm"></pds-icon>
54
+ Content categories
55
+ </button>
56
+ <menu>
57
+ <li><a href="#news">News</a></li>
58
+ <li><a href="#guides">Guides</a></li>
59
+ <li><a href="#case-studies">Case studies</a></li>
60
+ <li><a href="#announcements">Announcements</a></li>
61
+ </menu>
62
+ </nav>
63
+ </article>
64
+
65
+ <article class="card surface-subtle stack-sm border-gradient">
66
+ <h3>Quick response form</h3>
67
+ <form data-required class="stack-sm">
68
+ <label>
69
+ <span data-label>Topic</span>
70
+ <input type="text" required placeholder="What should we publish next?" />
71
+ </label>
72
+ <label>
73
+ <span data-label>Priority</span>
74
+ <select>
75
+ <option>Low</option>
76
+ <option>Normal</option>
77
+ <option>High</option>
78
+ </select>
79
+ </label>
80
+ <button class="btn-primary" type="submit">Send feedback</button>
81
+ </form>
82
+ </article>
83
+ </section>
84
+
85
+ <section class="card surface-base stack-sm">
86
+ <h3>Guidance accordion</h3>
87
+ <section class="accordion" aria-label="Content guidance">
88
+ <details>
89
+ <summary id="guide-voice">Voice & tone</summary>
90
+ <div role="region" aria-labelledby="guide-voice" class="stack-xs">
91
+ <p>Headlines should feel clear and confident while body copy remains concise and friendly.</p>
92
+ </div>
93
+ </details>
94
+ <details>
95
+ <summary id="guide-contrast">Contrast checks</summary>
96
+ <div role="region" aria-labelledby="guide-contrast" class="stack-xs">
97
+ <p>Validate quote blocks, muted labels, and border effects in both light and dark themes.</p>
98
+ </div>
99
+ </details>
100
+ <details>
101
+ <summary id="guide-interaction">Interaction cues</summary>
102
+ <div role="region" aria-labelledby="guide-interaction" class="flex gap-sm flex-wrap">
103
+ <button class="btn-primary btn-sm">Primary</button>
104
+ <button class="btn-secondary btn-sm">Secondary</button>
105
+ <button class="btn-outline btn-sm">Outline</button>
106
+ </div>
107
+ </details>
108
+ </section>
109
+ </section>
110
+ </section>
@@ -0,0 +1,91 @@
1
+ <section class="stack-lg" aria-label="Feedback Ops Dashboard">
2
+ <header class="card surface-elevated stack-sm border-gradient border-glow">
3
+ <div class="flex justify-between items-center gap-sm">
4
+ <div class="stack-xs">
5
+ <h2>Feedback Ops Dashboard</h2>
6
+ <p class="text-muted">Monthly pulse with submission progress, sentiment highlights, and clear action points.</p>
7
+ </div>
8
+ <nav data-dropdown data-mode="auto">
9
+ <button class="btn-outline btn-sm">
10
+ <pds-icon icon="list" size="sm"></pds-icon>
11
+ Actions
12
+ </button>
13
+ <menu>
14
+ <li><a href="#open-intake"><pds-icon icon="arrow-right" size="sm"></pds-icon>Open intake</a></li>
15
+ <li><a href="#share-report"><pds-icon icon="share" size="sm"></pds-icon>Share report</a></li>
16
+ <li><a href="#publish-summary"><pds-icon icon="rocket" size="sm"></pds-icon>Publish summary</a></li>
17
+ </menu>
18
+ </nav>
19
+ </div>
20
+ </header>
21
+
22
+ <section class="card surface-base stack-sm">
23
+ <div class="flex justify-between items-center gap-sm">
24
+ <h3>Current cycle progress</h3>
25
+ <span class="badge badge-primary">October 2026</span>
26
+ </div>
27
+ <div class="stack-xs">
28
+ <div class="flex justify-between items-center gap-sm">
29
+ <small class="text-muted">Feedback Submission Progress</small>
30
+ <strong>68% Complete</strong>
31
+ </div>
32
+ <progress value="68" max="100"></progress>
33
+ </div>
34
+ <p class="text-muted">Pending teams: Platform, Growth, and Enablement. Deadline closes in 3 days.</p>
35
+ <div class="flex gap-sm flex-wrap">
36
+ <button class="btn-primary">Submit Feedback</button>
37
+ <button class="btn-secondary">Send Reminder</button>
38
+ <button class="btn-outline">View Responses</button>
39
+ </div>
40
+ </section>
41
+
42
+ <section class="grid grid-auto-md gap-md">
43
+ <article class="card surface-elevated stack-sm">
44
+ <div class="flex justify-between items-center gap-sm">
45
+ <h4>Overall satisfaction</h4>
46
+ <span class="badge badge-success">+6%</span>
47
+ </div>
48
+ <p><strong>4.3 / 5</strong></p>
49
+ <div class="grid grid-cols-3 gap-sm">
50
+ <article class="card surface-subtle stack-xs"><small class="text-muted">People</small><strong>4.4</strong></article>
51
+ <article class="card surface-subtle stack-xs"><small class="text-muted">Tools</small><strong>4.1</strong></article>
52
+ <article class="card surface-subtle stack-xs"><small class="text-muted">Process</small><strong>4.2</strong></article>
53
+ </div>
54
+ </article>
55
+
56
+ <article class="card surface-subtle stack-sm border-gradient">
57
+ <div class="flex justify-between items-center gap-sm">
58
+ <h4>Top themes</h4>
59
+ <span class="badge">3 active</span>
60
+ </div>
61
+ <p class="text-muted">Most mentioned topics in this cycle:</p>
62
+ <ul class="stack-xs">
63
+ <li class="card surface-overlay flex justify-between items-center"><span>Career growth clarity</span><strong>42 mentions</strong></li>
64
+ <li class="card surface-overlay flex justify-between items-center"><span>Cross-team handoffs</span><strong>31 mentions</strong></li>
65
+ <li class="card surface-overlay flex justify-between items-center"><span>Meeting load balance</span><strong>28 mentions</strong></li>
66
+ </ul>
67
+ </article>
68
+ </section>
69
+
70
+ <section class="card surface-base stack-sm">
71
+ <h3>Team response coverage</h3>
72
+ <pds-scrollrow snap="start" tile-min="220px" tile-max="280px">
73
+ <article class="card surface-elevated stack-xs">
74
+ <div class="flex justify-between items-center"><strong>Design</strong><span class="badge badge-success">92%</span></div>
75
+ <progress value="92" max="100"></progress>
76
+ </article>
77
+ <article class="card surface-elevated stack-xs">
78
+ <div class="flex justify-between items-center"><strong>Engineering</strong><span class="badge badge-primary">73%</span></div>
79
+ <progress value="73" max="100"></progress>
80
+ </article>
81
+ <article class="card surface-elevated stack-xs">
82
+ <div class="flex justify-between items-center"><strong>Product</strong><span class="badge badge-warning">61%</span></div>
83
+ <progress value="61" max="100"></progress>
84
+ </article>
85
+ <article class="card surface-elevated stack-xs">
86
+ <div class="flex justify-between items-center"><strong>Customer Success</strong><span class="badge badge-primary">79%</span></div>
87
+ <progress value="79" max="100"></progress>
88
+ </article>
89
+ </pds-scrollrow>
90
+ </section>
91
+ </section>
@@ -0,0 +1,69 @@
1
+ <section class="stack-lg" aria-label="Release Readiness Radar">
2
+ <header class="card surface-elevated stack-sm border-gradient border-glow">
3
+ <div class="flex justify-between items-center gap-sm">
4
+ <div class="stack-xs">
5
+ <h2>Release Readiness Radar</h2>
6
+ <p class="text-muted">Launch-focused status board with gates, risk summaries, and deployment actions.</p>
7
+ </div>
8
+ <span class="badge badge-primary">Release 24.11</span>
9
+ </div>
10
+ </header>
11
+
12
+ <section class="card surface-base stack-sm">
13
+ <div class="flex justify-between items-center gap-sm">
14
+ <h3>Overall readiness</h3>
15
+ <strong>76%</strong>
16
+ </div>
17
+ <progress value="76" max="100"></progress>
18
+ <div class="flex gap-sm flex-wrap">
19
+ <button class="btn-primary">Start Go/No-Go</button>
20
+ <button class="btn-secondary">Review blockers</button>
21
+ <button class="btn-outline">Share status</button>
22
+ </div>
23
+ </section>
24
+
25
+ <section class="grid grid-auto-md gap-md">
26
+ <article class="card surface-elevated stack-sm">
27
+ <h4>Gate checks</h4>
28
+ <ul class="stack-xs">
29
+ <li class="card surface-subtle flex justify-between items-center"><span>Feature complete</span><span class="badge badge-success">Pass</span></li>
30
+ <li class="card surface-subtle flex justify-between items-center"><span>QA regression</span><span class="badge badge-warning">At risk</span></li>
31
+ <li class="card surface-subtle flex justify-between items-center"><span>Security review</span><span class="badge badge-success">Pass</span></li>
32
+ <li class="card surface-subtle flex justify-between items-center"><span>Docs readiness</span><span class="badge badge-primary">In progress</span></li>
33
+ </ul>
34
+ </article>
35
+
36
+ <article class="card surface-subtle stack-sm border-gradient">
37
+ <h4>Risk pressure</h4>
38
+ <div class="grid grid-cols-3 gap-sm">
39
+ <article class="card surface-overlay stack-xs"><small class="text-muted">High</small><strong>2</strong></article>
40
+ <article class="card surface-overlay stack-xs"><small class="text-muted">Medium</small><strong>7</strong></article>
41
+ <article class="card surface-overlay stack-xs"><small class="text-muted">Low</small><strong>11</strong></article>
42
+ </div>
43
+ <blockquote>
44
+ “Most risk is concentrated in end-to-end checkout and notification retries.”
45
+ </blockquote>
46
+ </article>
47
+ </section>
48
+
49
+ <section class="grid grid-auto-sm gap-md">
50
+ <article class="card surface-base stack-sm">
51
+ <h4>Deployment windows</h4>
52
+ <ul class="stack-xs">
53
+ <li class="flex justify-between items-center"><span>Staging freeze</span><small class="text-muted">Mon 09:00</small></li>
54
+ <li class="flex justify-between items-center"><span>Production canary</span><small class="text-muted">Tue 11:00</small></li>
55
+ <li class="flex justify-between items-center"><span>Global rollout</span><small class="text-muted">Wed 14:00</small></li>
56
+ </ul>
57
+ </article>
58
+
59
+ <article class="card surface-elevated stack-sm">
60
+ <h4>Owners on duty</h4>
61
+ <div class="grid grid-cols-3 gap-sm">
62
+ <article class="card surface-subtle stack-xs"><small class="text-muted">Engineering</small><strong>Nina</strong></article>
63
+ <article class="card surface-subtle stack-xs"><small class="text-muted">QA</small><strong>Sam</strong></article>
64
+ <article class="card surface-subtle stack-xs"><small class="text-muted">SRE</small><strong>Lee</strong></article>
65
+ </div>
66
+ <button class="btn-outline btn-sm">Open runbook</button>
67
+ </article>
68
+ </section>
69
+ </section>
@@ -0,0 +1,92 @@
1
+ <section class="stack-lg" aria-label="Support Command Center">
2
+ <header class="card surface-elevated stack-sm border-gradient">
3
+ <div class="flex justify-between items-center gap-sm">
4
+ <div class="stack-xs">
5
+ <h2>Support Command Center</h2>
6
+ <p class="text-muted">Track SLA health, backlog pressure, and escalation actions from a single rich canvas.</p>
7
+ </div>
8
+ <button class="btn-primary">Open Escalation Queue</button>
9
+ </div>
10
+ </header>
11
+
12
+ <section class="grid grid-auto-md gap-md">
13
+ <article class="card surface-base stack-sm">
14
+ <div class="flex justify-between items-center">
15
+ <h3>SLA compliance</h3>
16
+ <span class="badge badge-success">Healthy</span>
17
+ </div>
18
+ <div class="stack-xs">
19
+ <div class="flex justify-between items-center">
20
+ <small class="text-muted">Resolved within SLA</small>
21
+ <strong>94%</strong>
22
+ </div>
23
+ <progress value="94" max="100"></progress>
24
+ </div>
25
+ <p class="text-muted">Current target is 90%. Trend has improved for four consecutive weeks.</p>
26
+ </article>
27
+
28
+ <article class="card surface-subtle stack-sm border-glow">
29
+ <div class="flex justify-between items-center">
30
+ <h3>Backlog load</h3>
31
+ <span class="badge badge-warning">Needs review</span>
32
+ </div>
33
+ <ul class="stack-xs">
34
+ <li class="card surface-overlay flex justify-between items-center"><span>P1 incidents</span><strong>3</strong></li>
35
+ <li class="card surface-overlay flex justify-between items-center"><span>P2 issues</span><strong>17</strong></li>
36
+ <li class="card surface-overlay flex justify-between items-center"><span>P3 tasks</span><strong>42</strong></li>
37
+ </ul>
38
+ <div class="flex gap-sm">
39
+ <button class="btn-secondary btn-sm">Rebalance</button>
40
+ <button class="btn-outline btn-sm">Assign owners</button>
41
+ </div>
42
+ </article>
43
+ </section>
44
+
45
+ <section class="card surface-base stack-sm">
46
+ <div class="flex justify-between items-center gap-sm">
47
+ <h3>Weekly ticket throughput</h3>
48
+ <span class="text-muted">Last 6 weeks</span>
49
+ </div>
50
+ <div class="grid grid-cols-3 gap-sm">
51
+ <article class="card surface-elevated stack-xs">
52
+ <small class="text-muted">Opened</small>
53
+ <strong>128</strong>
54
+ </article>
55
+ <article class="card surface-elevated stack-xs">
56
+ <small class="text-muted">Resolved</small>
57
+ <strong>141</strong>
58
+ </article>
59
+ <article class="card surface-elevated stack-xs">
60
+ <small class="text-muted">Reopened</small>
61
+ <strong>9</strong>
62
+ </article>
63
+ </div>
64
+ <blockquote>
65
+ “The healthiest weeks pair high resolve volume with stable reopen rates.”
66
+ </blockquote>
67
+ </section>
68
+
69
+ <section class="card surface-subtle stack-sm">
70
+ <h3>Escalation playbook</h3>
71
+ <section class="accordion" aria-label="Support playbook">
72
+ <details open>
73
+ <summary id="support-step-1">Step 1: Triage</summary>
74
+ <div role="region" aria-labelledby="support-step-1" class="stack-xs">
75
+ <p>Validate severity, customer impact, and required responders within first 10 minutes.</p>
76
+ </div>
77
+ </details>
78
+ <details>
79
+ <summary id="support-step-2">Step 2: Communicate</summary>
80
+ <div role="region" aria-labelledby="support-step-2" class="stack-xs">
81
+ <p>Post an internal status update and notify affected customer channels.</p>
82
+ </div>
83
+ </details>
84
+ <details>
85
+ <summary id="support-step-3">Step 3: Recover</summary>
86
+ <div role="region" aria-labelledby="support-step-3" class="stack-xs">
87
+ <p>Execute mitigation, verify service health, and log postmortem action items.</p>
88
+ </div>
89
+ </details>
90
+ </section>
91
+ </section>
92
+ </section>
@@ -0,0 +1,53 @@
1
+ {
2
+ "version": "1",
3
+ "templates": [
4
+ {
5
+ "id": "commerce-scroll-explorer",
6
+ "name": "Commerce Scroll Explorer",
7
+ "description": "Product-focused canvas with pds-scrollrow, smart surfaces, border effects, dropdown actions, and interactive controls.",
8
+ "icon": "shopping-cart",
9
+ "file": "commerce-scroll-explorer.html",
10
+ "tags": ["scrollrow", "cards", "dropdown", "interactive", "border-effects", "surfaces"]
11
+ },
12
+ {
13
+ "id": "workspace-settings-lab",
14
+ "name": "Workspace Settings Lab",
15
+ "description": "Rich settings canvas with enhanced forms, toggles, accordion sections, and state-heavy controls for rapid theme/config evaluation.",
16
+ "icon": "gear",
17
+ "file": "workspace-settings-lab.html",
18
+ "tags": ["forms", "enhancements", "accordion", "states", "settings"]
19
+ },
20
+ {
21
+ "id": "content-brand-showcase",
22
+ "name": "Content & Brand Showcase",
23
+ "description": "Narrative layout with blockquotes, nested smart surfaces, dropdown panels, cards, and contrast-sensitive text hierarchy.",
24
+ "icon": "text-aa",
25
+ "file": "content-brand-showcase.html",
26
+ "tags": ["blockquote", "surfaces", "dropdown", "cards", "branding"]
27
+ },
28
+ {
29
+ "id": "feedback-ops-dashboard",
30
+ "name": "Feedback Ops Dashboard",
31
+ "description": "Monthly feedback operations layout with progress tracking, response coverage, theme summaries, and action-ready controls.",
32
+ "icon": "list",
33
+ "file": "feedback-ops-dashboard.html",
34
+ "tags": ["dashboard", "feedback", "progress", "kpi", "scrollrow", "cards"]
35
+ },
36
+ {
37
+ "id": "support-command-center",
38
+ "name": "Support Command Center",
39
+ "description": "Service desk dashboard with SLA progress, backlog pressure cards, throughput metrics, and escalation playbook sections.",
40
+ "icon": "gear",
41
+ "file": "support-command-center.html",
42
+ "tags": ["dashboard", "support", "sla", "operations", "accordion", "metrics"]
43
+ },
44
+ {
45
+ "id": "release-readiness-radar",
46
+ "name": "Release Readiness Radar",
47
+ "description": "Launch-readiness dashboard combining gate checks, risk pressure, deployment windows, and go/no-go action controls.",
48
+ "icon": "rocket",
49
+ "file": "release-readiness-radar.html",
50
+ "tags": ["dashboard", "release", "readiness", "risk", "kpi", "operations"]
51
+ }
52
+ ]
53
+ }