vanilla-breeze 0.2.0 → 0.3.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 (138) hide show
  1. package/custom-elements.json +11251 -18739
  2. package/dist/cdn/components/icon-wc.js +2 -2
  3. package/dist/cdn/components/manifest.json +2 -146
  4. package/dist/cdn/components/settings-panel.js +3 -3
  5. package/dist/cdn/components/theme-picker.js +12 -12
  6. package/dist/cdn/packs/journal.effects.css +2 -0
  7. package/dist/cdn/packs/journal.full.css +2 -0
  8. package/dist/cdn/packs/manifest.json +11 -21
  9. package/dist/cdn/packs/ui.full.js +4 -4
  10. package/dist/cdn/themes/8bit.tokens.json +1 -1
  11. package/dist/cdn/themes/alpha1999-dark.tokens.json +1 -1
  12. package/dist/cdn/themes/alpha1999.tokens.json +1 -1
  13. package/dist/cdn/themes/anthropic.tokens.json +1 -1
  14. package/dist/cdn/themes/art-deco-dark.tokens.json +1 -1
  15. package/dist/cdn/themes/art-deco.tokens.json +1 -1
  16. package/dist/cdn/themes/bauhaus-dark.tokens.json +1 -1
  17. package/dist/cdn/themes/bauhaus.tokens.json +1 -1
  18. package/dist/cdn/themes/brutalist-dark.tokens.json +1 -1
  19. package/dist/cdn/themes/brutalist.tokens.json +1 -1
  20. package/dist/cdn/themes/catppuccin-frappe.tokens.json +1 -1
  21. package/dist/cdn/themes/catppuccin-latte-dark.tokens.json +1 -1
  22. package/dist/cdn/themes/catppuccin-latte.tokens.json +1 -1
  23. package/dist/cdn/themes/catppuccin-macchiato.tokens.json +1 -1
  24. package/dist/cdn/themes/catppuccin-mocha.tokens.json +1 -1
  25. package/dist/cdn/themes/classic-dark.tokens.json +1 -1
  26. package/dist/cdn/themes/classic.tokens.json +1 -1
  27. package/dist/cdn/themes/claymorphism-dark.tokens.json +1 -1
  28. package/dist/cdn/themes/claymorphism.tokens.json +1 -1
  29. package/dist/cdn/themes/clinical-dark.tokens.json +1 -1
  30. package/dist/cdn/themes/clinical.tokens.json +1 -1
  31. package/dist/cdn/themes/cottagecore-dark.tokens.json +1 -1
  32. package/dist/cdn/themes/cottagecore.tokens.json +1 -1
  33. package/dist/cdn/themes/cyber.tokens.json +1 -1
  34. package/dist/cdn/themes/dawn-dark.tokens.json +1 -1
  35. package/dist/cdn/themes/dawn.tokens.json +1 -1
  36. package/dist/cdn/themes/dracula.tokens.json +1 -1
  37. package/dist/cdn/themes/dusk.tokens.json +1 -1
  38. package/dist/cdn/themes/editorial-dark.tokens.json +1 -1
  39. package/dist/cdn/themes/editorial.tokens.json +1 -1
  40. package/dist/cdn/themes/financial-dark.tokens.json +1 -1
  41. package/dist/cdn/themes/financial.tokens.json +1 -1
  42. package/dist/cdn/themes/genai.tokens.json +1 -1
  43. package/dist/cdn/themes/glassmorphism-dark.tokens.json +1 -1
  44. package/dist/cdn/themes/glassmorphism.tokens.json +1 -1
  45. package/dist/cdn/themes/government-dark.tokens.json +1 -1
  46. package/dist/cdn/themes/government.tokens.json +1 -1
  47. package/dist/cdn/themes/gruvbox-dark.tokens.json +1 -1
  48. package/dist/cdn/themes/gruvbox.tokens.json +1 -1
  49. package/dist/cdn/themes/high-noon-dark.tokens.json +1 -1
  50. package/dist/cdn/themes/high-noon.tokens.json +1 -1
  51. package/dist/cdn/themes/ibm.tokens.json +1 -1
  52. package/dist/cdn/themes/journal-dark.tokens.json +406 -0
  53. package/dist/cdn/themes/journal.css +2 -0
  54. package/dist/cdn/themes/journal.tokens.json +583 -0
  55. package/dist/cdn/themes/kawaii-dark.tokens.json +1 -1
  56. package/dist/cdn/themes/kawaii.tokens.json +1 -1
  57. package/dist/cdn/themes/magna-dark.tokens.json +1 -1
  58. package/dist/cdn/themes/magna.tokens.json +1 -1
  59. package/dist/cdn/themes/manifest.json +7 -0
  60. package/dist/cdn/themes/mcdonalds.tokens.json +1 -1
  61. package/dist/cdn/themes/midnight.tokens.json +1 -1
  62. package/dist/cdn/themes/minimal-dark.tokens.json +1 -1
  63. package/dist/cdn/themes/minimal.tokens.json +1 -1
  64. package/dist/cdn/themes/modern-dark.tokens.json +1 -1
  65. package/dist/cdn/themes/modern.tokens.json +1 -1
  66. package/dist/cdn/themes/nes-dark.tokens.json +1 -1
  67. package/dist/cdn/themes/nes.tokens.json +1 -1
  68. package/dist/cdn/themes/neumorphism-dark.tokens.json +1 -1
  69. package/dist/cdn/themes/neumorphism.tokens.json +1 -1
  70. package/dist/cdn/themes/nord-dark.tokens.json +1 -1
  71. package/dist/cdn/themes/nord.tokens.json +1 -1
  72. package/dist/cdn/themes/organic-dark.tokens.json +1 -1
  73. package/dist/cdn/themes/organic.tokens.json +1 -1
  74. package/dist/cdn/themes/rose-pine-dark.tokens.json +1 -1
  75. package/dist/cdn/themes/rose-pine.tokens.json +1 -1
  76. package/dist/cdn/themes/rough-dark.tokens.json +1 -1
  77. package/dist/cdn/themes/rough.tokens.json +1 -1
  78. package/dist/cdn/themes/solarized-dark.tokens.json +1 -1
  79. package/dist/cdn/themes/solarized.tokens.json +1 -1
  80. package/dist/cdn/themes/starbucks.tokens.json +1 -1
  81. package/dist/cdn/themes/startup-dark.tokens.json +1 -1
  82. package/dist/cdn/themes/startup.tokens.json +1 -1
  83. package/dist/cdn/themes/super2026-dark.tokens.json +1 -1
  84. package/dist/cdn/themes/super2026.tokens.json +1 -1
  85. package/dist/cdn/themes/swiss-dark.tokens.json +1 -1
  86. package/dist/cdn/themes/swiss.tokens.json +1 -1
  87. package/dist/cdn/themes/terminal.tokens.json +1 -1
  88. package/dist/cdn/themes/tokyo-night-dark.tokens.json +1 -1
  89. package/dist/cdn/themes/tokyo-night.tokens.json +1 -1
  90. package/dist/cdn/themes/vaporwave-dark.tokens.json +1 -1
  91. package/dist/cdn/themes/vaporwave.tokens.json +1 -1
  92. package/dist/cdn/themes/win9x-dark.tokens.json +1 -1
  93. package/dist/cdn/themes/win9x.tokens.json +1 -1
  94. package/dist/cdn/vanilla-breeze-core.js +17 -17
  95. package/dist/cdn/vanilla-breeze-extras.js +36 -222
  96. package/dist/cdn/vanilla-breeze.css +1 -1
  97. package/dist/cdn/vanilla-breeze.js +232 -2608
  98. package/package.json +2 -3
  99. package/dist/cdn/components/accessibility-specimen.js +0 -11
  100. package/dist/cdn/components/adr-wc.js +0 -403
  101. package/dist/cdn/components/breakpoint-specimen.js +0 -26
  102. package/dist/cdn/components/burndown-chart.js +0 -2
  103. package/dist/cdn/components/capacity-plan.js +0 -25
  104. package/dist/cdn/components/color-palette.js +0 -16
  105. package/dist/cdn/components/component-sampler.js +0 -45
  106. package/dist/cdn/components/empathy-map.js +0 -582
  107. package/dist/cdn/components/font-pairer.js +0 -108
  108. package/dist/cdn/components/gantt-chart.js +0 -2
  109. package/dist/cdn/components/gradient-builder.js +0 -52
  110. package/dist/cdn/components/impact-effort.js +0 -2
  111. package/dist/cdn/components/iron-triangle.js +0 -2
  112. package/dist/cdn/components/kanban-board.js +0 -2
  113. package/dist/cdn/components/layout-specimen.js +0 -35
  114. package/dist/cdn/components/motion-specimen.js +0 -21
  115. package/dist/cdn/components/palette-generator.js +0 -15
  116. package/dist/cdn/components/product-roadmap.js +0 -3
  117. package/dist/cdn/components/quadrant-grid.js +0 -3
  118. package/dist/cdn/components/quality-target.js +0 -12
  119. package/dist/cdn/components/requirement-card.js +0 -122
  120. package/dist/cdn/components/review-surface.js +0 -535
  121. package/dist/cdn/components/risk-register.js +0 -25
  122. package/dist/cdn/components/semantic-palette.js +0 -30
  123. package/dist/cdn/components/spacing-specimen.js +0 -6
  124. package/dist/cdn/components/story-map.js +0 -2
  125. package/dist/cdn/components/theme-catalog.js +0 -28
  126. package/dist/cdn/components/theme-export.js +0 -26
  127. package/dist/cdn/components/theme-import.js +0 -44
  128. package/dist/cdn/components/token-specimen.js +0 -26
  129. package/dist/cdn/components/traceability-matrix.js +0 -3
  130. package/dist/cdn/components/type-specimen.js +0 -19
  131. package/dist/cdn/components/user-journey.js +0 -366
  132. package/dist/cdn/components/user-persona.js +0 -402
  133. package/dist/cdn/components/user-story.js +0 -411
  134. package/dist/cdn/components/work-item.js +0 -447
  135. package/dist/cdn/packs/design-system.full.css +0 -2
  136. package/dist/cdn/packs/design-system.full.js +0 -175
  137. package/dist/cdn/packs/ux-planning.full.css +0 -2
  138. package/dist/cdn/packs/ux-planning.full.js +0 -3160
@@ -1,411 +0,0 @@
1
- var h=`
2
- :host {
3
- --_bg: var(--user-story-bg, var(--color-surface, #ffffff));
4
- --_text: var(--user-story-text, var(--color-text, #1a1a1a));
5
- --_muted: var(--user-story-muted, var(--color-text-muted, #666));
6
- --_border: var(--user-story-border, var(--color-border, #e0e0e0));
7
- --_accent: var(--user-story-accent, var(--color-interactive, #0066cc));
8
- --_card-bg: var(--user-story-card-bg, var(--color-surface-raised, #f8f9fa));
9
- --_highlight: var(--user-story-highlight, color-mix(in srgb, var(--_accent) 8%, transparent));
10
- --_radius: var(--user-story-radius, var(--radius-l, 0.75rem));
11
- --_shadow: var(--user-story-shadow, var(--shadow-sm));
12
- --_shadow-hover: var(--user-story-shadow-hover, var(--shadow-md));
13
- --_duration: var(--user-story-duration, var(--duration-normal, 200ms));
14
- --_ease: var(--user-story-ease, var(--ease-default, ease));
15
- --_space-xs: var(--user-story-space-xs, var(--size-xs, 0.5rem));
16
- --_space-s: var(--user-story-space-s, var(--size-s, 0.75rem));
17
- --_space-m: var(--user-story-space-m, var(--size-m, 1rem));
18
- --_font-xs: var(--user-story-font-xs, var(--font-size-xs, 0.75rem));
19
- --_font-sm: var(--user-story-font-sm, var(--font-size-sm, 0.875rem));
20
- --_font-md: var(--user-story-font-md, var(--font-size-md, 1rem));
21
- --_font-lg: var(--user-story-font-lg, var(--font-size-lg, 1.125rem));
22
- --_font-mono: var(--user-story-font-mono, var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace));
23
- --_radius-s: var(--user-story-radius-s, var(--radius-s, 0.25rem));
24
- --_radius-full: var(--user-story-radius-full, var(--radius-full, 9999px));
25
-
26
- display: block;
27
- font-family: var(--user-story-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
28
- }
29
-
30
- .story-card {
31
- background: var(--_bg);
32
- border: 1px solid var(--_border);
33
- border-radius: var(--_radius);
34
- overflow: hidden;
35
- box-shadow: var(--_shadow);
36
- transition: box-shadow var(--_duration) var(--_ease), transform var(--_duration) var(--_ease);
37
- }
38
-
39
- .story-card:hover {
40
- box-shadow: var(--_shadow-hover);
41
- }
42
-
43
- .story-header {
44
- display: flex;
45
- align-items: center;
46
- justify-content: space-between;
47
- padding: var(--_space-s) var(--_space-m);
48
- background: var(--_card-bg);
49
- border-bottom: 1px solid var(--_border);
50
- gap: var(--_space-s);
51
- flex-wrap: wrap;
52
- }
53
-
54
- .story-meta {
55
- display: flex;
56
- align-items: center;
57
- gap: var(--_space-xs);
58
- flex-wrap: wrap;
59
- }
60
-
61
- .story-id {
62
- font-size: var(--_font-xs);
63
- font-weight: 600;
64
- color: var(--_muted);
65
- font-family: var(--_font-mono);
66
- }
67
-
68
- .epic-badge {
69
- font-size: 11px;
70
- padding: 3px 8px;
71
- border-radius: var(--_radius-s);
72
- background: var(--_highlight);
73
- color: var(--_accent);
74
- font-weight: 500;
75
- }
76
-
77
- .story-badges {
78
- display: flex;
79
- align-items: center;
80
- gap: var(--_space-xs);
81
- }
82
-
83
- .priority-badge,
84
- .status-badge {
85
- font-size: 11px;
86
- padding: 4px 10px;
87
- border-radius: var(--_radius-full);
88
- font-weight: 600;
89
- text-transform: uppercase;
90
- letter-spacing: 0.3px;
91
- }
92
-
93
- .points-badge {
94
- width: 28px;
95
- height: 28px;
96
- border-radius: var(--_radius-full);
97
- background: var(--_accent);
98
- color: white;
99
- font-size: var(--_font-xs);
100
- font-weight: 700;
101
- display: flex;
102
- align-items: center;
103
- justify-content: center;
104
- }
105
-
106
- .story-body {
107
- padding: 20px;
108
- }
109
-
110
- :host([compact]) .story-body {
111
- padding: var(--_space-m);
112
- }
113
-
114
- .story-statement {
115
- font-size: var(--_font-lg);
116
- line-height: 1.6;
117
- color: var(--_text);
118
- margin: 0;
119
- }
120
-
121
- :host([compact]) .story-statement {
122
- font-size: 15px;
123
- }
124
-
125
- .keyword {
126
- font-weight: 600;
127
- color: var(--_accent);
128
- }
129
-
130
- .persona-text {
131
- background: var(--_highlight);
132
- padding: 2px 6px;
133
- border-radius: var(--_radius-s);
134
- font-weight: 500;
135
- }
136
-
137
- .persona-text--link {
138
- display: inline-flex;
139
- align-items: center;
140
- gap: 3px;
141
- color: var(--_accent);
142
- text-decoration: none;
143
- }
144
-
145
- .persona-text--link svg {
146
- width: 13px;
147
- height: 13px;
148
- flex-shrink: 0;
149
- }
150
-
151
- .persona-text--link:hover {
152
- text-decoration: underline;
153
- }
154
-
155
- .action-text {
156
- font-weight: 500;
157
- }
158
-
159
- .benefit-text {
160
- font-style: italic;
161
- color: var(--_muted);
162
- }
163
-
164
- .story-sections {
165
- border-top: 1px solid var(--_border);
166
- }
167
-
168
- .section {
169
- padding: 16px 20px;
170
- border-bottom: 1px solid var(--_border);
171
- }
172
-
173
- .section:last-child {
174
- border-bottom: none;
175
- }
176
-
177
- .section-header {
178
- display: flex;
179
- align-items: center;
180
- gap: var(--_space-xs);
181
- margin-bottom: var(--_space-s);
182
- }
183
-
184
- .section-icon {
185
- width: 24px;
186
- height: 24px;
187
- border-radius: 6px;
188
- display: flex;
189
- align-items: center;
190
- justify-content: center;
191
- background: var(--_accent);
192
- }
193
-
194
- .section-icon svg {
195
- width: 14px;
196
- height: 14px;
197
- fill: white;
198
- }
199
-
200
- /* Semantic section-icon colors \u2014 driven by VB theme tokens so they shift
201
- with the active theme rather than fighting it. */
202
- .section-icon.acceptance { background: var(--color-success, #22c55e); }
203
- .section-icon.notes { background: var(--color-warning, #f59e0b); }
204
- .section-icon.tasks { background: var(--color-accent, #8b5cf6); }
205
-
206
- .section-title {
207
- font-size: var(--_font-xs);
208
- font-weight: 600;
209
- color: var(--_muted);
210
- text-transform: uppercase;
211
- letter-spacing: 0.5px;
212
- }
213
-
214
- .section-content {
215
- color: var(--_text);
216
- font-size: var(--_font-sm);
217
- line-height: 1.6;
218
- }
219
-
220
- /* Slotted content styling */
221
- .section-content ::slotted(ul),
222
- .section-content ::slotted(ol) {
223
- margin: 0;
224
- padding-left: 20px;
225
- }
226
-
227
- .section-content ::slotted(li) {
228
- margin-bottom: 6px;
229
- }
230
-
231
- .section-content ::slotted(p) {
232
- margin: 0;
233
- }
234
-
235
- /* Empty-slot fallback */
236
- .slot-fallback {
237
- color: var(--_muted);
238
- font-style: italic;
239
- }
240
-
241
- @media (max-width: 480px) {
242
- .story-header {
243
- flex-direction: column;
244
- align-items: flex-start;
245
- }
246
-
247
- .story-badges {
248
- width: 100%;
249
- justify-content: flex-start;
250
- }
251
- }
252
-
253
- @media (prefers-reduced-motion: reduce) {
254
- .story-card {
255
- transition: none;
256
- }
257
- }
258
-
259
- /* \u2500\u2500 Slotted title (minimal mode heading) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
260
- .story-title-wrap {
261
- margin: 0;
262
- }
263
-
264
- ::slotted([slot="title"]) {
265
- font-size: var(--_font-sm) !important;
266
- font-weight: 600 !important;
267
- color: var(--_text) !important;
268
- margin: 0 !important;
269
- }
270
-
271
- .story-title-fallback {
272
- font-size: var(--_font-sm);
273
- font-weight: 600;
274
- color: var(--_text);
275
- }
276
-
277
- /* Minimal detail level */
278
- :host([detail="minimal"]) .story-card {
279
- padding: var(--_space-xs);
280
- }
281
-
282
- :host([detail="minimal"]) .story-header {
283
- display: none;
284
- }
285
-
286
- :host([detail="minimal"]) .story-sections {
287
- display: none;
288
- }
289
-
290
- :host([detail="minimal"]) .story-body {
291
- padding: var(--_space-xs) var(--_space-s);
292
- }
293
-
294
- :host([detail="minimal"]) .story-card {
295
- cursor: pointer;
296
- }
297
-
298
- :host([detail="minimal"]) .story-card:hover {
299
- box-shadow: var(--_shadow-hover);
300
- }
301
-
302
- :host([detail="minimal"]) .story-card:focus-visible {
303
- outline: 2px solid var(--_accent);
304
- outline-offset: 2px;
305
- }
306
-
307
- :host([detail="minimal"]) .story-id {
308
- display: block;
309
- margin-bottom: var(--_space-2xs);
310
- }
311
-
312
- :host([detail="minimal"]) .benefit-text {
313
- display: none;
314
- }
315
-
316
- /* Compact detail level \u2014 hide empty sections */
317
- :host([detail="compact"]) .section[data-empty] {
318
- display: none;
319
- }
320
-
321
- :host([detail="compact"]) .slot-fallback {
322
- display: none;
323
- }
324
- `;var v=window.matchMedia("(prefers-reduced-motion: reduce)");var m=new Map;function f(r,t,e={}){let s=e.priority??10,i={impl:t,bundle:e.bundle,contract:e.contract,priority:s},o=m.get(r);if(customElements.get(r)){if(!o||o.priority>=s){o&&o.priority===s&&o.impl!==t&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${o.bundle}" (priority ${o.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${o.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(o&&o.priority>=s){o.priority===s&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${o.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}m.set(r,i),customElements.define(r,t)}function c(r){return String(r).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function b(r){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${r}</svg>`}var d={user:'<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',pencil:'<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',check:'<path d="M20 6 9 17l-5-5"/>',target:'<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',alertTriangle:'<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',messageCircle:'<path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>',lightbulb:'<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',wrench:'<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/>',heart:'<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>',mapPin:'<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',checkCircle:'<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/>',x:'<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',download:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',send:'<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>'},w={says:{label:"Says",icon:d.messageCircle,color:"#3b82f6"},thinks:{label:"Thinks",icon:d.lightbulb,color:"#8b5cf6"},does:{label:"Does",icon:d.wrench,color:"#f59e0b"},feels:{label:"Feels",icon:d.heart,color:"#ef4444"}};var u=class r extends HTMLElement{static get observedAttributes(){return["persona-id","priority","points","status","epic","story-id","compact","detail","src"]}static PRIORITIES={critical:{label:"Critical",color:"#dc2626",bg:"rgba(220, 38, 38, 0.1)"},high:{label:"High",color:"#ea580c",bg:"rgba(234, 88, 12, 0.1)"},medium:{label:"Medium",color:"#ca8a04",bg:"rgba(202, 138, 4, 0.1)"},low:{label:"Low",color:"#16a34a",bg:"rgba(22, 163, 74, 0.1)"}};static STATUSES={backlog:{label:"Backlog",color:"#6b7280",bg:"rgba(107, 114, 128, 0.1)"},"to-do":{label:"To Do",color:"#3b82f6",bg:"rgba(59, 130, 246, 0.1)"},"in-progress":{label:"In Progress",color:"#8b5cf6",bg:"rgba(139, 92, 246, 0.1)"},review:{label:"Review",color:"#f59e0b",bg:"rgba(245, 158, 11, 0.1)"},done:{label:"Done",color:"#22c55e",bg:"rgba(34, 197, 94, 0.1)"}};#t=new Map;#e=null;constructor(){super(),this.attachShadow({mode:"open"})}#o(){for(let t of[...this.children]){let e=t.getAttribute("slot");e&&this.#t.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}get data(){return{storyId:this.storyId||void 0,personaId:this.personaId||void 0,priority:this.priority,status:this.status,points:this.points||void 0,epic:this.epic||void 0,detail:this.getAttribute("detail")||void 0,persona:this.persona||void 0,action:this.action||void 0,benefit:this.benefit||void 0,title:this.storyTitle||void 0}}set data(t){!t||typeof t!="object"||(this._applyData(t),this.#o(),this.shadowRoot&&this.#s(),this.dispatchEvent(new CustomEvent("user-story:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0,composed:!0})))}_applyData(t){for(let[e,s]of[["storyId","story-id"],["personaId","persona-id"],["priority","priority"],["status","status"],["points","points"],["epic","epic"],["detail","detail"]])t[e]!=null&&this.setAttribute(s,String(t[e]));if(t.persona&&!this.querySelector('[slot="persona"]')){let e=document.createElement("span");e.slot="persona",e.textContent=String(t.persona),this.appendChild(e)}if(t.action&&!this.querySelector('[slot="action"]')){let e=document.createElement("span");e.slot="action",e.textContent=String(t.action),this.appendChild(e)}if(t.benefit&&!this.querySelector('[slot="benefit"]')){let e=document.createElement("span");e.slot="benefit",e.textContent=String(t.benefit),this.appendChild(e)}if(t.title&&!this.querySelector('[slot="title"]')){let e=document.createElement("h3");e.slot="title",e.textContent=String(t.title),this.appendChild(e)}for(let e of["acceptance-criteria","tasks","notes"]){let s=e==="acceptance-criteria"?"acceptanceCriteria":e;if(t[s]&&!this.querySelector(`[slot="${e}"]`))if(Array.isArray(t[s])){let i=document.createElement("ul");i.slot=e;for(let o of t[s]){let n=document.createElement("li");n.textContent=String(o),i.appendChild(n)}this.appendChild(i)}else{let i=document.createElement("p");i.slot=e,i.textContent=String(t[s]),this.appendChild(i)}}}async _loadSrc(t){if(t)try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let s=await e.json();this._applyData(s),this.#o(),this.#s()}catch(e){console.warn(`[user-story] Failed to load src="${t}":`,e)}}connectedCallback(){this.#o(),this.storyId&&!this.id&&(this.id=this.storyId),this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#s(),this.#r(),this.setAttribute("data-upgraded","")}disconnectedCallback(){this.removeAttribute("data-upgraded"),this.#e?.disconnect(),this.#e=null}attributeChangedCallback(t,e,s){e!==s&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(s):(this.#s(),t==="persona-id"&&this.#r()))}#r(){if(this.#e?.disconnect(),this.#e=null,!this.personaId||this.#i())return;let t=this.getRootNode(),s=(t&&typeof t.getElementById=="function"?t:document).getElementById(this.personaId);!s||s.tagName!=="USER-PERSONA"||(this.#e=new MutationObserver(()=>this.#s()),this.#e.observe(s,{attributes:!0,attributeFilter:["role"]}))}get persona(){return this.#i()||this.#a()||"user"}get personaId(){return this.getAttribute("persona-id")||""}#i(){return this.querySelector('[slot="persona"]')?.textContent?.trim()||this.#t.get("persona")||""}#a(){if(!this.personaId)return"";let t=this.getRootNode(),s=(t&&typeof t.getElementById=="function"?t:document).getElementById(this.personaId);return!s||s.tagName!=="USER-PERSONA"?"":s.getAttribute("role")?.trim()||""}#n(){return/^[aeio]/i.test(this.persona.trim())?"an":"a"}get action(){return this.querySelector('[slot="action"]')?.textContent?.trim()||this.#t.get("action")||""}get benefit(){return this.querySelector('[slot="benefit"]')?.textContent?.trim()||this.#t.get("benefit")||""}get priority(){return this.getAttribute("priority")||"medium"}get points(){return this.getAttribute("points")||""}get status(){return this.getAttribute("status")||"backlog"}get epic(){return this.getAttribute("epic")||""}get storyId(){return this.getAttribute("story-id")||""}get storyTitle(){return this.querySelector('[slot="title"]')?.textContent?.trim()||this.#t.get("title")||""}get _minimalLabel(){if(this.storyTitle)return this.storyTitle;let t=this.action;return t.length>40?t.slice(0,40)+"\u2026":t}get compact(){return this.hasAttribute("compact")}get _detailLevel(){return this.getAttribute("detail")?this.getAttribute("detail"):this.hasAttribute("compact")?"compact":"full"}updateStatus(t){r.STATUSES[t]&&(this.setAttribute("status",t),this.dispatchEvent(new CustomEvent("status-changed",{detail:{status:t,storyId:this.storyId},bubbles:!0,composed:!0})))}updatePriority(t){r.PRIORITIES[t]&&(this.setAttribute("priority",t),this.dispatchEvent(new CustomEvent("priority-changed",{detail:{priority:t,storyId:this.storyId},bubbles:!0,composed:!0})))}showDetail(){let t=`story-dialog-${this.storyId||this.id||"detail"}`,e=document.getElementById(t);e||(e=document.createElement("dialog"),e.id=t,e.setAttribute("data-size","l"),document.body.appendChild(e));let s=document.createElement("form");s.method="dialog";let i=document.createElement("header"),o=document.createElement("h3");o.textContent=this.storyTitle||this.storyId||"Story Detail";let n=document.createElement("button");n.type="submit",n.setAttribute("aria-label","Close"),n.textContent="\xD7",i.appendChild(o),i.appendChild(n);let l=document.createElement("section"),p=document.createElement("user-story");for(let a of this.getAttributeNames())a==="detail"||a==="compact"||a==="data-upgraded"||a==="draggable"||a==="data-id"||a==="data-quadrant"||p.setAttribute(a,this.getAttribute(a)??"");let y=[...this.children].some(a=>a.getAttribute("slot")&&a.tagName!=="DIALOG");p.setAttribute("detail",y?"full":"compact"),p.removeAttribute("id");for(let a of[...this.children])a.tagName!=="DIALOG"&&p.appendChild(a.cloneNode(!0));l.appendChild(p),s.appendChild(i),s.appendChild(l),e.innerHTML="",e.appendChild(s),e.addEventListener("close",()=>{e.innerHTML=""},{once:!0}),e.showModal()}#s(){let t=r.PRIORITIES[this.priority]||r.PRIORITIES.medium,e=r.STATUSES[this.status]||r.STATUSES.backlog,s=this._detailLevel,i=this.storyId?`User story: ${c(this.storyId)}`:"User story";if(this.shadowRoot){if(s==="minimal"){this.shadowRoot.innerHTML=`
325
- <style>${h}</style>
326
- <article class="story-card story-card--minimal" role="article" aria-label="${i}"
327
- tabindex="0">
328
- <div class="story-body">
329
- ${this.storyId?`<span class="story-id">${c(this.storyId)}</span>`:""}
330
- <div class="story-title-wrap">
331
- <slot name="title"><span class="story-title-fallback">${c(this._minimalLabel||"[describe the action]")}</span></slot>
332
- </div>
333
- </div>
334
- </article>
335
- `;let o=this.shadowRoot.querySelector(".story-card--minimal");if(!o)return;o.addEventListener("click",()=>this.showDetail()),o.addEventListener("keydown",n=>{let l=n;(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),this.showDetail())})}else this.shadowRoot.innerHTML=`
336
- <style>${h}</style>
337
-
338
- <article class="story-card story-card--${s}" part="card" role="article" aria-label="${i}">
339
- <header class="story-header" part="header">
340
- <div class="story-meta">
341
- ${this.storyId?`<span class="story-id" part="id">${c(this.storyId)}</span>`:""}
342
- ${this.epic?`<span class="epic-badge" part="epic">${c(this.epic)}</span>`:""}
343
- </div>
344
- <div class="story-badges">
345
- <span class="priority-badge" part="priority"
346
- style="color: ${t.color}; background: ${t.bg};"
347
- >${c(t.label)}</span>
348
- <span class="status-badge" part="status"
349
- style="color: ${e.color}; background: ${e.bg};"
350
- >${c(e.label)}</span>
351
- ${this.points?`<span class="points-badge" part="points">${c(this.points)}</span>`:""}
352
- </div>
353
- </header>
354
-
355
- <div class="story-body" part="body">
356
- <p class="story-statement" part="statement">
357
- <span class="keyword">As ${this.#n()}</span>
358
- ${this.personaId?`<a class="persona-text persona-text--link" href="#${c(this.personaId)}">${b(d.user)} <slot name="persona"><span>${c(this.#a()||"user")}</span></slot></a>`:'<span class="persona-text"><slot name="persona"><span>user</span></slot></span>'},
359
- <span class="keyword">I want</span>
360
- <span class="action-text"><slot name="action"><span>[describe the action]</span></slot></span>${this.benefit||this.querySelector('[slot="benefit"]')?`
361
- <span class="keyword">so that</span>
362
- <span class="benefit-text"><slot name="benefit"></slot></span>`:""}
363
- </p>
364
- </div>
365
-
366
- <div class="story-sections" part="sections">
367
- <div class="section" part="section">
368
- <div class="section-header">
369
- <div class="section-icon acceptance">
370
- <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
371
- </div>
372
- <span class="section-title">Acceptance Criteria</span>
373
- </div>
374
- <div class="section-content">
375
- <slot name="acceptance-criteria">
376
- <em class="slot-fallback">No acceptance criteria defined.</em>
377
- </slot>
378
- </div>
379
- </div>
380
-
381
- <div class="section" part="section">
382
- <div class="section-header">
383
- <div class="section-icon tasks">
384
- <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
385
- </div>
386
- <span class="section-title">Tasks</span>
387
- </div>
388
- <div class="section-content">
389
- <slot name="tasks">
390
- <em class="slot-fallback">No tasks added yet.</em>
391
- </slot>
392
- </div>
393
- </div>
394
-
395
- <div class="section" part="section">
396
- <div class="section-header">
397
- <div class="section-icon notes">
398
- <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
399
- </div>
400
- <span class="section-title">Notes</span>
401
- </div>
402
- <div class="section-content">
403
- <slot name="notes">
404
- <em class="slot-fallback">No additional notes.</em>
405
- </slot>
406
- </div>
407
- </div>
408
- </div>
409
- </article>
410
- `,s==="compact"&&this.shadowRoot.querySelectorAll(".section").forEach(n=>{let l=n.querySelector("slot");l&&l.assignedNodes().length===0&&n.setAttribute("data-empty","")});this.dispatchEvent(new CustomEvent("story-ready",{detail:{id:this.storyId,persona:this.persona,action:this.action,benefit:this.benefit,priority:this.priority,status:this.status,points:this.points},bubbles:!0,composed:!0}))}}};f("user-story",u);export{u as UserStory};
411
- //# sourceMappingURL=user-story.js.map