vanilla-breeze 0.1.0 → 0.1.2

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 (99) hide show
  1. package/dist/cdn/components/adr-record.js +383 -0
  2. package/dist/cdn/components/adr-wc.js +403 -0
  3. package/dist/cdn/components/analytics-panel.js +34 -0
  4. package/dist/cdn/components/author-index.js +3 -0
  5. package/dist/cdn/components/brand-mark.js +2 -0
  6. package/dist/cdn/components/calendar-wc.js +2 -2
  7. package/dist/cdn/components/carousel-wc.js +1 -1
  8. package/dist/cdn/components/chart-wc.js +25 -25
  9. package/dist/cdn/components/color-palette.js +13 -7
  10. package/dist/cdn/components/comment-wc.js +2 -0
  11. package/dist/cdn/components/consent-banner.js +1 -1
  12. package/dist/cdn/components/content-lens.js +2 -0
  13. package/dist/cdn/components/day-view.js +2 -0
  14. package/dist/cdn/components/empathy-map.js +42 -25
  15. package/dist/cdn/components/flow-diagram.js +2 -0
  16. package/dist/cdn/components/font-pairer.js +108 -0
  17. package/dist/cdn/components/gantt-chart.js +2 -0
  18. package/dist/cdn/components/geo-map.js +7 -7
  19. package/dist/cdn/components/glossary-wc.js +2 -0
  20. package/dist/cdn/components/gradient-builder.js +52 -0
  21. package/dist/cdn/components/highlight-wc.js +3 -0
  22. package/dist/cdn/components/manifest.json +134 -26
  23. package/dist/cdn/components/markdown-viewer.js +3 -3
  24. package/dist/cdn/components/motion-specimen.js +21 -0
  25. package/dist/cdn/components/note-wc.js +3 -0
  26. package/dist/cdn/components/notification-wc.js +37 -0
  27. package/dist/cdn/components/page-info.js +55 -24
  28. package/dist/cdn/components/page-toc.js +1 -1
  29. package/dist/cdn/components/popularity-index.js +9 -0
  30. package/dist/cdn/components/print-page.js +1 -1
  31. package/dist/cdn/components/recently-visited.js +3 -0
  32. package/dist/cdn/components/review-surface.js +541 -0
  33. package/dist/cdn/components/selection-menu.js +2 -0
  34. package/dist/cdn/components/semantic-palette.js +30 -0
  35. package/dist/cdn/components/settings-panel.js +55 -51
  36. package/dist/cdn/components/share-wc.js +2 -2
  37. package/dist/cdn/components/site-map-wc.js +2 -0
  38. package/dist/cdn/components/spacing-specimen.js +5 -5
  39. package/dist/cdn/components/split-surface.js +1 -1
  40. package/dist/cdn/components/text-reader.js +2 -2
  41. package/dist/cdn/components/theme-export.js +18 -0
  42. package/dist/cdn/components/theme-picker.js +58 -58
  43. package/dist/cdn/components/token-specimen.js +25 -20
  44. package/dist/cdn/components/topic-map.js +3 -0
  45. package/dist/cdn/components/trust-filter.js +4 -0
  46. package/dist/cdn/components/type-specimen.js +16 -13
  47. package/dist/cdn/components/user-journey.js +48 -30
  48. package/dist/cdn/components/user-persona.js +17 -15
  49. package/dist/cdn/components/user-story.js +55 -22
  50. package/dist/cdn/components/watch-wc.js +3 -0
  51. package/dist/cdn/components/week-view.js +2 -0
  52. package/dist/cdn/components/work-item.js +446 -0
  53. package/dist/cdn/packs/design-system.full.js +124 -47
  54. package/dist/cdn/packs/effects.full.js +1 -1
  55. package/dist/cdn/packs/kawaii.full.css +1 -1
  56. package/dist/cdn/packs/kawaii.full.js +1 -1
  57. package/dist/cdn/packs/kawaii.theme.css +1 -1
  58. package/dist/cdn/packs/manifest.json +10 -40
  59. package/dist/cdn/packs/prototype.full.js +1 -1
  60. package/dist/cdn/packs/ui.full.css +1 -1
  61. package/dist/cdn/packs/ui.full.js +50 -50
  62. package/dist/cdn/packs/ux-planning.full.css +1 -1
  63. package/dist/cdn/packs/ux-planning.full.js +1546 -92
  64. package/dist/cdn/themes/8bit.css +1 -1
  65. package/dist/cdn/themes/alpha1999.css +1 -1
  66. package/dist/cdn/themes/bauhaus.css +1 -1
  67. package/dist/cdn/themes/brutalist.css +1 -1
  68. package/dist/cdn/themes/claymorphism.css +1 -1
  69. package/dist/cdn/themes/cottagecore.css +1 -1
  70. package/dist/cdn/themes/cyber.css +1 -1
  71. package/dist/cdn/themes/genai.css +1 -1
  72. package/dist/cdn/themes/glassmorphism.css +1 -1
  73. package/dist/cdn/themes/kawaii.css +1 -1
  74. package/dist/cdn/themes/magna.css +1 -1
  75. package/dist/cdn/themes/manifest.json +20 -20
  76. package/dist/cdn/themes/nes.css +1 -1
  77. package/dist/cdn/themes/neumorphism.css +1 -1
  78. package/dist/cdn/themes/organic.css +1 -1
  79. package/dist/cdn/themes/rough.css +1 -1
  80. package/dist/cdn/themes/startup.css +1 -1
  81. package/dist/cdn/themes/super2026.css +1 -1
  82. package/dist/cdn/themes/terminal.css +1 -1
  83. package/dist/cdn/themes/vaporwave.css +1 -1
  84. package/dist/cdn/themes/win9x.css +1 -1
  85. package/dist/cdn/vanilla-breeze-charts.js +25 -25
  86. package/dist/cdn/vanilla-breeze-core.css +1 -1
  87. package/dist/cdn/vanilla-breeze-core.js +119 -47
  88. package/dist/cdn/vanilla-breeze-dev.js +1 -1
  89. package/dist/cdn/vanilla-breeze-extras.js +154 -74
  90. package/dist/cdn/vanilla-breeze.css +1 -1
  91. package/dist/cdn/vanilla-breeze.js +1988 -248
  92. package/package.json +8 -6
  93. package/dist/cdn/packs/retro.bundle.js +0 -2
  94. package/dist/cdn/packs/retro.components.js +0 -1
  95. package/dist/cdn/packs/retro.effects.css +0 -2
  96. package/dist/cdn/packs/retro.effects.js +0 -16
  97. package/dist/cdn/packs/retro.full.css +0 -5
  98. package/dist/cdn/packs/retro.full.js +0 -16
  99. package/dist/cdn/packs/retro.theme.css +0 -2
@@ -0,0 +1,2 @@
1
+ var x=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let e of this.#t)e();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(e,r,n,c){e.addEventListener(r,n,c),this.#t.push(()=>e.removeEventListener(r,n,c))}setup(){}teardown(){}};var P=window.matchMedia("(prefers-reduced-motion: reduce)");var N=new Map;function B(d,e,r={}){let n=r.priority??10,c={impl:e,bundle:r.bundle,contract:r.contract,priority:n},t=N.get(d);if(customElements.get(d)){if(!t||t.priority>=n){t&&t.priority===n&&t.impl!==e&&console.warn(`[VB Bundle] Tag <${d}> already registered by "${t.bundle}" (priority ${t.priority}). Skipping "${r.bundle}".`);return}console.warn(`[VB Bundle] Tag <${d}> defined by "${t.bundle}" cannot be replaced (customElements.define is permanent). "${r.bundle}" has higher priority but arrived late.`);return}if(t&&t.priority>=n){t.priority===n&&console.warn(`[VB Bundle] Tag <${d}> already registered by "${t.bundle}". Skipping "${r.bundle}" (first wins at equal priority).`);return}N.set(d,c),customElements.define(d,e)}function O(d){let e=d.getFullYear(),r=String(d.getMonth()+1).padStart(2,"0"),n=String(d.getDate()).padStart(2,"0");return`${e}-${r}-${n}`}var T=class extends x{#t;setup(){if(this.#t=this.querySelector("table"),this.#t||this.#n(),!this.#t)return!1;this.#e(),this.listen(this.#t,"click",r=>{let n=r.target.closest("calendar-event");if(!n)return;let t=n.closest("tr")?.querySelector("th time[datetime]");this.dispatchEvent(new CustomEvent("week-view:event-click",{bubbles:!0,detail:{date:n.dataset.date,time:n.querySelector("time[datetime]")?.getAttribute("datetime")||t?.getAttribute("datetime"),text:n.textContent.trim(),element:n,category:n.dataset.category,duration:n.dataset.duration}}))}),this.#r();let e=this.#t.querySelector("calendar-event");e&&e.setAttribute("tabindex","0")}teardown(){this.querySelectorAll("calendar-event.wv-spanning").forEach(e=>{e.style.cssText="",e.classList.remove("wv-spanning")})}refresh(){this.teardown(),this.#e()}#n(){let e=[...this.querySelectorAll(":scope > calendar-event")];if(e.length===0)return;let r=this.dataset.startDate;if(!r)return;let n=parseInt(this.dataset.days||"7",10),[c,t,h]=r.split("-").map(Number),m=new Date(c,t-1,h),l=[];for(let s=0;s<n;s++){let i=new Date(m);i.setDate(i.getDate()+s),l.push(i)}let u=l.map(O),o=new Map,a=new Set;e.forEach(s=>{let i=s.dataset.date;if(!i||!u.includes(i))return;let p=s.querySelector("time[datetime]");if(!p)return;let v=p.getAttribute("datetime").split(":"),A=parseInt(v[0],10),C=parseInt(v[1]||"0",10);if(isNaN(A))return;C>=30&&!s.dataset.start&&(s.dataset.start="30");let D=String(A).padStart(2,"0"),y=`${i}:${D}`;o.has(y)||o.set(y,[]),o.get(y).push(s),a.add(A)});let f=[...a].sort((s,i)=>s-i),b=this.dataset.startHour==="auto"||!this.dataset.startHour,E=b?f.length>0?Math.max(0,f[0]-1):7:parseInt(this.dataset.startHour,10),g=b?f.length>0?Math.min(23,f[f.length-1]+1):19:parseInt(this.dataset.endHour||"19",10),S=this.closest("[lang]")?.lang||navigator.language,M=new Intl.DateTimeFormat(S,{weekday:"short",day:"numeric"}),$=new Intl.DateTimeFormat(S,{hour:"numeric"});this.style.setProperty("--wv-days",n);let w=document.createElement("table"),F=document.createElement("thead"),q=document.createElement("tr"),L=document.createElement("th");L.setAttribute("aria-label","Time"),q.appendChild(L),l.forEach(s=>{let i=document.createElement("th");i.setAttribute("scope","col");let p=document.createElement("time");p.setAttribute("datetime",O(s)),p.textContent=M.format(s),i.appendChild(p),q.appendChild(i)}),F.appendChild(q),w.appendChild(F);let H=document.createElement("tbody");for(let s=E;s<=g;s++){let i=document.createElement("tr"),p=document.createElement("th");p.setAttribute("scope","row");let k=document.createElement("time"),v=String(s).padStart(2,"0");k.setAttribute("datetime",`${v}:00`),k.textContent=$.format(new Date(2026,0,1,s)),p.appendChild(k),i.appendChild(p),u.forEach(A=>{let C=document.createElement("td"),D=`${A}:${v}`,y=o.get(D)||[];if(y.length>0){let I=document.createElement("hour-view");y.length>1&&(I.dataset.overlap=""),y.forEach(R=>I.appendChild(R)),C.appendChild(I)}i.appendChild(C)}),H.appendChild(i)}w.appendChild(H),this.appendChild(w),this.#t=w}#e(){let e=this.#t.querySelector("tbody");if(!e)return;let r=e.querySelectorAll("calendar-event[data-duration]");r.length!==0&&requestAnimationFrame(()=>{let n=e.getBoundingClientRect(),c=new Map;e.querySelectorAll(":scope > tr").forEach(t=>{let h=t.querySelector("th time[datetime]");if(!h)return;let m=parseInt(h.getAttribute("datetime").split(":")[0],10),l=t.getBoundingClientRect();c.set(m,{top:l.top-n.top,height:l.height})}),r.forEach(t=>{let h=t.closest("td"),m=h?.closest("tr");if(!h||!m)return;let l=m.querySelector("th time[datetime]"),u=parseInt(l?.getAttribute("datetime")?.split(":")[0],10),o=parseInt(t.dataset.start||"0",10),a=t.dataset.duration,f=60,b=a.match(/(\d+)h/),E=a.match(/(\d+)m/);(b||E)&&(f=(b?parseInt(b[1],10)*60:0)+(E?parseInt(E[1],10):0));let g=c.get(u);if(!g)return;let S=h.getBoundingClientRect(),M=o/60,$=g.top+g.height*M,w=g.height*(f/60);t.style.position="absolute",t.style.top=$+"px",t.style.height=w+"px",t.style.left=S.left-n.left+2+"px",t.style.right=n.right-S.right+2+"px",t.classList.add("wv-spanning")})})}#r(){this.listen(this.#t,"keydown",e=>{if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.key))return;let r=e.target.closest("calendar-event");if(!r)return;let n=r.closest("td"),c=n?.closest("tr");if(!n||!c)return;let t=[...c.parentElement.children],h=t.indexOf(c),m=[...c.children],l=m.indexOf(n),u=null;if(e.key==="ArrowDown")for(let o=h+1;o<t.length;o++){let a=t[o].children[l]?.querySelector("calendar-event");if(a){u=a;break}}else if(e.key==="ArrowUp")for(let o=h-1;o>=0;o--){let a=t[o].children[l]?.querySelector("calendar-event");if(a){u=a;break}}else if(e.key==="ArrowRight")for(let o=l+1;o<m.length;o++){let a=m[o]?.querySelector("calendar-event");if(a){u=a;break}}else if(e.key==="ArrowLeft")for(let o=l-1;o>=1;o--){let a=m[o]?.querySelector("calendar-event");if(a){u=a;break}}u&&(e.preventDefault(),u.setAttribute("tabindex","0"),r.setAttribute("tabindex","-1"),u.focus())})}};B("week-view",T);export{T as WeekView};
2
+ //# sourceMappingURL=week-view.js.map
@@ -0,0 +1,446 @@
1
+ var c=`
2
+ :host {
3
+ --_bg: var(--work-item-bg, var(--color-surface, #ffffff));
4
+ --_text: var(--work-item-text, var(--color-text, #1a1a1a));
5
+ --_muted: var(--work-item-muted, var(--color-text-muted, #666));
6
+ --_border: var(--work-item-border, var(--color-border, #e0e0e0));
7
+ --_accent: var(--work-item-accent, var(--color-interactive, #0066cc));
8
+ --_card-bg: var(--work-item-card-bg, var(--color-surface-raised, #f8f9fa));
9
+ --_highlight: var(--work-item-highlight, color-mix(in srgb, var(--_accent) 8%, transparent));
10
+ --_radius: var(--work-item-radius, var(--radius-l, 0.75rem));
11
+ --_shadow: var(--work-item-shadow, var(--shadow-sm));
12
+ --_shadow-hover: var(--work-item-shadow-hover, var(--shadow-md));
13
+ --_duration: var(--work-item-duration, var(--duration-normal, 200ms));
14
+ --_ease: var(--work-item-ease, var(--ease-default, ease));
15
+ --_space-2xs: var(--work-item-space-2xs, var(--size-2xs, 0.25rem));
16
+ --_space-xs: var(--work-item-space-xs, var(--size-xs, 0.5rem));
17
+ --_space-s: var(--work-item-space-s, var(--size-s, 0.75rem));
18
+ --_space-m: var(--work-item-space-m, var(--size-m, 1rem));
19
+ --_font-xs: var(--work-item-font-xs, var(--font-size-xs, 0.75rem));
20
+ --_font-sm: var(--work-item-font-sm, var(--font-size-sm, 0.875rem));
21
+ --_font-md: var(--work-item-font-md, var(--font-size-md, 1rem));
22
+ --_font-lg: var(--work-item-font-lg, var(--font-size-lg, 1.125rem));
23
+ --_font-mono: var(--work-item-font-mono, var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace));
24
+ --_radius-s: var(--work-item-radius-s, var(--radius-s, 0.25rem));
25
+ --_radius-full: var(--work-item-radius-full, var(--radius-full, 9999px));
26
+
27
+ display: block;
28
+ font-family: var(--work-item-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
29
+ }
30
+
31
+ *, *::before, *::after { box-sizing: border-box; margin: 0; }
32
+
33
+ /* \u2500\u2500 Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
34
+ .wi-card {
35
+ background: var(--_bg);
36
+ border: 1px solid var(--_border);
37
+ border-radius: var(--_radius);
38
+ overflow: hidden;
39
+ box-shadow: var(--_shadow);
40
+ transition: box-shadow var(--_duration) var(--_ease);
41
+ }
42
+
43
+ .wi-card:hover {
44
+ box-shadow: var(--_shadow-hover);
45
+ }
46
+
47
+ /* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
48
+ .wi-header {
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: space-between;
52
+ padding: var(--_space-s) var(--_space-m);
53
+ background: var(--_card-bg);
54
+ border-block-end: 1px solid var(--_border);
55
+ gap: var(--_space-s);
56
+ flex-wrap: wrap;
57
+ }
58
+
59
+ .wi-meta {
60
+ display: flex;
61
+ align-items: center;
62
+ gap: var(--_space-xs);
63
+ flex-wrap: wrap;
64
+ min-width: 0;
65
+ }
66
+
67
+ .wi-id {
68
+ font-size: var(--_font-xs);
69
+ font-weight: 600;
70
+ color: var(--_muted);
71
+ font-family: var(--_font-mono);
72
+ }
73
+
74
+ /* \u2500\u2500 Type badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
75
+ .wi-type {
76
+ display: inline-flex;
77
+ align-items: center;
78
+ gap: 4px;
79
+ font-size: 11px;
80
+ font-weight: 600;
81
+ padding: 3px 8px;
82
+ border-radius: var(--_radius-s);
83
+ text-transform: capitalize;
84
+ }
85
+
86
+ .wi-type svg {
87
+ width: 12px;
88
+ height: 12px;
89
+ }
90
+
91
+ /* Type colors */
92
+ .wi-type[data-type="task"] { color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
93
+ .wi-type[data-type="bug"] { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
94
+ .wi-type[data-type="chore"] { color: #6b7280; background: rgba(107, 114, 128, 0.1); }
95
+ .wi-type[data-type="spike"] { color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }
96
+ .wi-type[data-type="feature"] { color: #059669; background: rgba(5, 150, 105, 0.1); }
97
+
98
+ /* \u2500\u2500 Badges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
99
+ .wi-badges {
100
+ display: flex;
101
+ align-items: center;
102
+ gap: var(--_space-xs);
103
+ }
104
+
105
+ .wi-priority,
106
+ .wi-status {
107
+ font-size: 11px;
108
+ padding: 4px 10px;
109
+ border-radius: var(--_radius-full);
110
+ font-weight: 600;
111
+ text-transform: uppercase;
112
+ letter-spacing: 0.3px;
113
+ }
114
+
115
+ .wi-estimate {
116
+ width: 28px;
117
+ height: 28px;
118
+ border-radius: var(--_radius-full);
119
+ background: var(--_accent);
120
+ color: white;
121
+ font-size: var(--_font-xs);
122
+ font-weight: 700;
123
+ display: flex;
124
+ align-items: center;
125
+ justify-content: center;
126
+ }
127
+
128
+ /* \u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
129
+ .wi-body {
130
+ padding: 16px 20px;
131
+ }
132
+
133
+ .wi-title-wrap {
134
+ margin-block-end: var(--_space-xs);
135
+ }
136
+
137
+ .wi-title-wrap:last-child {
138
+ margin-block-end: 0;
139
+ }
140
+
141
+ ::slotted([slot="title"]) {
142
+ font-size: var(--_font-lg) !important;
143
+ font-weight: 700 !important;
144
+ color: var(--_text) !important;
145
+ line-height: 1.4 !important;
146
+ margin: 0 !important;
147
+ }
148
+
149
+ .wi-title-fallback {
150
+ font-size: var(--_font-lg);
151
+ font-weight: 700;
152
+ color: var(--_text);
153
+ line-height: 1.4;
154
+ }
155
+
156
+ .wi-title:last-child {
157
+ margin-block-end: 0;
158
+ }
159
+
160
+ /* \u2500\u2500 Assignee \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
161
+ .wi-assignee {
162
+ display: inline-flex;
163
+ align-items: center;
164
+ gap: 5px;
165
+ font-size: var(--_font-xs);
166
+ color: var(--_muted);
167
+ margin-block-start: var(--_space-xs);
168
+ }
169
+
170
+ .wi-assignee__avatar {
171
+ width: 20px;
172
+ height: 20px;
173
+ border-radius: var(--_radius-full);
174
+ font-size: 9px;
175
+ font-weight: 700;
176
+ display: flex;
177
+ align-items: center;
178
+ justify-content: center;
179
+ color: #fff;
180
+ flex-shrink: 0;
181
+ }
182
+
183
+ /* \u2500\u2500 Linked stories \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
184
+ .wi-links {
185
+ display: flex;
186
+ flex-wrap: wrap;
187
+ gap: 4px;
188
+ margin-block-start: var(--_space-s);
189
+ }
190
+
191
+ .wi-link {
192
+ display: inline-flex;
193
+ align-items: center;
194
+ gap: 3px;
195
+ font-size: 11px;
196
+ font-weight: 500;
197
+ padding: 2px 8px;
198
+ border-radius: var(--_radius-s);
199
+ background: var(--_highlight);
200
+ color: var(--_accent);
201
+ text-decoration: none;
202
+ }
203
+
204
+ .wi-link:hover {
205
+ text-decoration: underline;
206
+ }
207
+
208
+ .wi-link svg {
209
+ width: 11px;
210
+ height: 11px;
211
+ }
212
+
213
+ /* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
214
+ .wi-sections {
215
+ border-block-start: 1px solid var(--_border);
216
+ }
217
+
218
+ .wi-section {
219
+ padding: 14px 20px;
220
+ border-block-end: 1px solid var(--_border);
221
+ }
222
+
223
+ .wi-section:last-child {
224
+ border-block-end: none;
225
+ }
226
+
227
+ .wi-section-header {
228
+ display: flex;
229
+ align-items: center;
230
+ gap: var(--_space-xs);
231
+ margin-block-end: var(--_space-s);
232
+ }
233
+
234
+ .wi-section-icon {
235
+ width: 22px;
236
+ height: 22px;
237
+ border-radius: 5px;
238
+ display: flex;
239
+ align-items: center;
240
+ justify-content: center;
241
+ }
242
+
243
+ .wi-section-icon svg {
244
+ width: 13px;
245
+ height: 13px;
246
+ fill: white;
247
+ }
248
+
249
+ .wi-section-icon.description { background: #3b82f6; }
250
+ .wi-section-icon.checklist { background: #22c55e; }
251
+ .wi-section-icon.notes { background: #f59e0b; }
252
+
253
+ .wi-section-title {
254
+ font-size: var(--_font-xs);
255
+ font-weight: 600;
256
+ color: var(--_muted);
257
+ text-transform: uppercase;
258
+ letter-spacing: 0.5px;
259
+ }
260
+
261
+ .wi-section-content {
262
+ color: var(--_text);
263
+ font-size: var(--_font-sm);
264
+ line-height: 1.6;
265
+ }
266
+
267
+ .wi-section-content ::slotted(ul),
268
+ .wi-section-content ::slotted(ol) {
269
+ margin: 0;
270
+ padding-inline-start: 20px;
271
+ }
272
+
273
+ .wi-section-content ::slotted(p) {
274
+ margin: 0;
275
+ }
276
+
277
+ .slot-fallback {
278
+ color: var(--_muted);
279
+ font-style: italic;
280
+ }
281
+
282
+ /* \u2500\u2500 Minimal detail \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
283
+ .wi-card--minimal {
284
+ padding: var(--_space-xs);
285
+ cursor: pointer;
286
+ }
287
+
288
+ .wi-card--minimal:hover {
289
+ box-shadow: var(--_shadow-hover);
290
+ }
291
+
292
+ .wi-card--minimal:focus-visible {
293
+ outline: 2px solid var(--_accent);
294
+ outline-offset: 2px;
295
+ }
296
+
297
+ .wi-card--minimal .wi-header { display: none; }
298
+ .wi-card--minimal .wi-sections { display: none; }
299
+ .wi-card--minimal .wi-links { display: none; }
300
+ .wi-card--minimal .wi-assignee { display: none; }
301
+
302
+ .wi-card--minimal .wi-body {
303
+ padding: var(--_space-xs) var(--_space-s);
304
+ }
305
+
306
+ .wi-card--minimal .wi-title-fallback,
307
+ .wi-card--minimal ::slotted([slot="title"]) {
308
+ font-size: var(--_font-sm) !important;
309
+ font-weight: 600 !important;
310
+ }
311
+
312
+ .wi-card--minimal .wi-id {
313
+ display: block;
314
+ margin-block-end: var(--_space-2xs);
315
+ }
316
+
317
+ .wi-card--minimal .wi-type {
318
+ font-size: 10px;
319
+ padding: 2px 6px;
320
+ }
321
+
322
+ /* \u2500\u2500 Compact detail \u2014 hide empty sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
323
+ .wi-card--compact .wi-section[data-empty] {
324
+ display: none;
325
+ }
326
+
327
+ .wi-card--compact .slot-fallback {
328
+ display: none;
329
+ }
330
+
331
+ .wi-card--compact .wi-body {
332
+ padding: var(--_space-s) var(--_space-m);
333
+ }
334
+
335
+ /* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
336
+ @media (max-width: 480px) {
337
+ .wi-header {
338
+ flex-direction: column;
339
+ align-items: flex-start;
340
+ }
341
+
342
+ .wi-badges {
343
+ width: 100%;
344
+ justify-content: flex-start;
345
+ }
346
+ }
347
+
348
+ @media (prefers-reduced-motion: reduce) {
349
+ .wi-card {
350
+ transition: none;
351
+ }
352
+ }
353
+
354
+ @media print {
355
+ .wi-card {
356
+ box-shadow: none;
357
+ break-inside: avoid;
358
+ }
359
+ }
360
+
361
+ .state-msg { padding: var(--_space-m); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
362
+ .state-msg--error { color: #dc2626; }
363
+ `;var k=window.matchMedia("(prefers-reduced-motion: reduce)");var g=new Map;function w(r,t,i={}){let e=i.priority??10,s={impl:t,bundle:i.bundle,contract:i.contract,priority:e},a=g.get(r);if(customElements.get(r)){if(!a||a.priority>=e){a&&a.priority===e&&a.impl!==t&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${a.bundle}" (priority ${a.priority}). Skipping "${i.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${a.bundle}" cannot be replaced (customElements.define is permanent). "${i.bundle}" has higher priority but arrived late.`);return}if(a&&a.priority>=e){a.priority===e&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${a.bundle}". Skipping "${i.bundle}" (first wins at equal priority).`);return}g.set(r,s),customElements.define(r,t)}function o(r){return String(r).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function b(r){return r.split(" ").map(t=>t[0]).join("").toUpperCase().slice(0,2)}function v(r){let t=0;for(let e=0;e<r.length;e++)t=r.charCodeAt(e)+((t<<5)-t);return`hsl(${(t%360+360)%360}, 65%, 55%)`}function p(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"/>'},M={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 y={task:'<rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 12 2 2 4-4"/>',bug:'<path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9"/><path d="M6.53 9C4.6 8.8 3 7.1 3 5"/><path d="M6 13H2"/><path d="M3 21c0-2.1 1.7-3.9 3.8-4"/><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/><path d="M22 13h-4"/><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/>',chore:'<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"/>',spike:'<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"/>',feature:'<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>'},h={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)"}},m={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)"},blocked:{label:"Blocked",color:"#dc2626",bg:"rgba(220, 38, 38, 0.1)"}},u=class extends HTMLElement{static get observedAttributes(){return["item-id","type","priority","status","estimate","assignee","story-ids","detail","compact","src"]}#t=new Map;constructor(){super(),this.attachShadow({mode:"open"})}#i(){for(let t of[...this.children]){let i=t.getAttribute("slot");i&&this.#t.set(i,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}connectedCallback(){this.#i(),this.itemId&&!this.id&&(this.id=this.itemId),this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#e(),this.setAttribute("data-upgraded","")}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t,i,e){i!==e&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(e):this.#e())}get itemId(){return this.getAttribute("item-id")||""}get itemTitle(){return this.querySelector('[slot="title"]')?.textContent?.trim()||this.#t.get("title")||""}get itemType(){return this.getAttribute("type")||"task"}get priority(){return this.getAttribute("priority")||"medium"}get status(){return this.getAttribute("status")||"backlog"}get estimate(){return this.getAttribute("estimate")||""}get assignee(){return this.getAttribute("assignee")||""}get storyIds(){let t=this.getAttribute("story-ids")||"";return t?t.split(",").map(i=>i.trim()).filter(Boolean):[]}get _detailLevel(){return this.getAttribute("detail")?this.getAttribute("detail"):this.hasAttribute("compact")?"compact":"full"}get _minimalLabel(){return this.itemTitle||this.itemId||"Work item"}updateStatus(t){m[t]&&(this.setAttribute("status",t),this.dispatchEvent(new CustomEvent("work-item:status",{detail:{status:t,itemId:this.itemId},bubbles:!0,composed:!0})))}updatePriority(t){h[t]&&(this.setAttribute("priority",t),this.dispatchEvent(new CustomEvent("work-item:priority",{detail:{priority:t,itemId:this.itemId},bubbles:!0,composed:!0})))}async _loadSrc(t){if(t){this.shadowRoot.innerHTML=`<style>${c}</style><div class="state-msg">Loading\u2026</div>`;try{let i=await fetch(t);if(!i.ok)throw new Error(`HTTP ${i.status}`);let e=await i.json();for(let[s,a]of[["itemId","item-id"],["type","type"],["priority","priority"],["status","status"],["estimate","estimate"],["assignee","assignee"],["detail","detail"]])e[s]!=null&&this.setAttribute(a,String(e[s]));if(e.storyIds&&this.setAttribute("story-ids",Array.isArray(e.storyIds)?e.storyIds.join(","):e.storyIds),e.title&&!this.querySelector('[slot="title"]')){let s=document.createElement("h3");s.slot="title",s.textContent=e.title,this.appendChild(s)}for(let s of["description","notes"])if(e[s]&&!this.querySelector(`[slot="${s}"]`)){let a=document.createElement("p");a.slot=s,a.textContent=e[s],this.appendChild(a)}if(e.checklist&&!this.querySelector('[slot="checklist"]')){let s=document.createElement("ul");s.slot="checklist";let a=Array.isArray(e.checklist)?e.checklist:[e.checklist];for(let l of a){let n=document.createElement("li");n.textContent=l,s.appendChild(n)}this.appendChild(s)}this.#e()}catch(i){this.shadowRoot.innerHTML=`<style>${c}</style><div class="state-msg state-msg--error">Could not load: ${o(i.message)}</div>`}}}#e(){let t=h[this.priority]||h.medium,i=m[this.status]||m.backlog,e=this.itemType,s=y[e]||y.task,a=this._detailLevel,l=this.itemId?`Work item: ${o(this.itemId)}`:"Work item";if(a==="minimal"){this.shadowRoot.innerHTML=`<style>${c}</style>
364
+ <article class="wi-card wi-card--minimal" role="article" aria-label="${l}"
365
+ tabindex="0">
366
+ <div class="wi-body">
367
+ <div class="wi-meta">
368
+ ${this.itemId?`<span class="wi-id">${o(this.itemId)}</span>`:""}
369
+ <span class="wi-type" data-type="${o(e)}">${p(s)} ${o(e)}</span>
370
+ </div>
371
+ <div class="wi-title-wrap">
372
+ <slot name="title"><span class="wi-title-fallback">${o(this._minimalLabel)}</span></slot>
373
+ </div>
374
+ </div>
375
+ </article>`;return}if(this.shadowRoot.innerHTML=`<style>${c}</style>
376
+ <article class="wi-card wi-card--${a}" role="article" aria-label="${l}">
377
+
378
+ <header class="wi-header">
379
+ <div class="wi-meta">
380
+ ${this.itemId?`<span class="wi-id">${o(this.itemId)}</span>`:""}
381
+ <span class="wi-type" data-type="${o(e)}">${p(s)} ${o(e)}</span>
382
+ </div>
383
+ <div class="wi-badges">
384
+ <span class="wi-priority" style="color:${t.color};background:${t.bg}">${o(t.label)}</span>
385
+ <span class="wi-status" style="color:${i.color};background:${i.bg}">${o(i.label)}</span>
386
+ ${this.estimate?`<span class="wi-estimate" title="Estimate">${o(this.estimate)}</span>`:""}
387
+ </div>
388
+ </header>
389
+
390
+ <div class="wi-body">
391
+ <div class="wi-title-wrap">
392
+ <slot name="title"><span class="wi-title-fallback">[Untitled work item]</span></slot>
393
+ </div>
394
+
395
+ ${this.assignee?`
396
+ <div class="wi-assignee">
397
+ <span class="wi-assignee__avatar" style="background:${v(this.assignee)}">${b(this.assignee)}</span>
398
+ ${o(this.assignee)}
399
+ </div>`:""}
400
+
401
+ ${this.storyIds.length?`
402
+ <div class="wi-links">
403
+ ${this.storyIds.map(n=>`<a class="wi-link" href="#${o(n)}">${p('<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 7h10"/><path d="M7 12h10"/><path d="M7 17h10"/>')} ${o(n)}</a>`).join("")}
404
+ </div>`:""}
405
+ </div>
406
+
407
+ <div class="wi-sections">
408
+ <div class="wi-section">
409
+ <div class="wi-section-header">
410
+ <div class="wi-section-icon description">
411
+ <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
412
+ </div>
413
+ <span class="wi-section-title">Description</span>
414
+ </div>
415
+ <div class="wi-section-content">
416
+ <slot name="description"><em class="slot-fallback">No description.</em></slot>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="wi-section">
421
+ <div class="wi-section-header">
422
+ <div class="wi-section-icon checklist">
423
+ <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>
424
+ </div>
425
+ <span class="wi-section-title">Checklist</span>
426
+ </div>
427
+ <div class="wi-section-content">
428
+ <slot name="checklist"><em class="slot-fallback">No checklist items.</em></slot>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="wi-section">
433
+ <div class="wi-section-header">
434
+ <div class="wi-section-icon notes">
435
+ <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>
436
+ </div>
437
+ <span class="wi-section-title">Notes</span>
438
+ </div>
439
+ <div class="wi-section-content">
440
+ <slot name="notes"><em class="slot-fallback">No notes.</em></slot>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ </article>`,a==="compact")for(let n of this.shadowRoot.querySelectorAll(".wi-section")){let f=n.querySelector("slot");f&&f.assignedNodes().length===0&&n.setAttribute("data-empty","")}this.dispatchEvent(new CustomEvent("work-item:ready",{detail:{itemId:this.itemId,title:this.itemTitle,type:e,priority:this.priority,status:this.status},bubbles:!0,composed:!0}))}};w("work-item",u);export{u as WorkItem};
446
+ //# sourceMappingURL=work-item.js.map