vanilla-breeze 0.1.0

package/dist/cdn/components/user-story.js

@@ -0,0 +1,377 @@
+var h=`
+:host {
+  --_bg:        var(--user-story-bg, var(--color-surface, #ffffff));
+  --_text:      var(--user-story-text, var(--color-text, #1a1a1a));
+  --_muted:     var(--user-story-muted, var(--color-text-muted, #666));
+  --_border:    var(--user-story-border, var(--color-border, #e0e0e0));
+  --_accent:    var(--user-story-accent, var(--color-interactive, #0066cc));
+  --_card-bg:   var(--user-story-card-bg, var(--color-surface-raised, #f8f9fa));
+  --_highlight: var(--user-story-highlight, color-mix(in srgb, var(--_accent) 8%, transparent));
+  --_radius:    var(--user-story-radius, var(--radius-l, 0.75rem));
+  --_shadow:       var(--user-story-shadow, var(--shadow-sm));
+  --_shadow-hover: var(--user-story-shadow-hover, var(--shadow-md));
+  --_duration:     var(--user-story-duration, var(--duration-normal, 200ms));
+  --_ease:         var(--user-story-ease, var(--ease-default, ease));
+  --_space-xs:     var(--user-story-space-xs, var(--size-xs, 0.5rem));
+  --_space-s:      var(--user-story-space-s, var(--size-s, 0.75rem));
+  --_space-m:      var(--user-story-space-m, var(--size-m, 1rem));
+  --_font-xs:      var(--user-story-font-xs, var(--font-size-xs, 0.75rem));
+  --_font-sm:      var(--user-story-font-sm, var(--font-size-sm, 0.875rem));
+  --_font-md:      var(--user-story-font-md, var(--font-size-md, 1rem));
+  --_font-lg:      var(--user-story-font-lg, var(--font-size-lg, 1.125rem));
+  --_font-mono:    var(--user-story-font-mono, var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace));
+  --_radius-s:     var(--user-story-radius-s, var(--radius-s, 0.25rem));
+  --_radius-full:  var(--user-story-radius-full, var(--radius-full, 9999px));
+
+  display: block;
+  font-family: var(--user-story-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+}
+
+.story-card {
+  background: var(--_bg);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  overflow: hidden;
+  box-shadow: var(--_shadow);
+  transition: box-shadow var(--_duration) var(--_ease), transform var(--_duration) var(--_ease);
+}
+
+.story-card:hover {
+  box-shadow: var(--_shadow-hover);
+}
+
+.story-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--_space-s) var(--_space-m);
+  background: var(--_card-bg);
+  border-bottom: 1px solid var(--_border);
+  gap: var(--_space-s);
+  flex-wrap: wrap;
+}
+
+.story-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+  flex-wrap: wrap;
+}
+
+.story-id {
+  font-size: var(--_font-xs);
+  font-weight: 600;
+  color: var(--_muted);
+  font-family: var(--_font-mono);
+}
+
+.epic-badge {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: var(--_radius-s);
+  background: var(--_highlight);
+  color: var(--_accent);
+  font-weight: 500;
+}
+
+.story-badges {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+}
+
+.priority-badge,
+.status-badge {
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: var(--_radius-full);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.points-badge {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--_radius-full);
+  background: var(--_accent);
+  color: white;
+  font-size: var(--_font-xs);
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.story-body {
+  padding: 20px;
+}
+
+:host([compact]) .story-body {
+  padding: var(--_space-m);
+}
+
+.story-statement {
+  font-size: var(--_font-lg);
+  line-height: 1.6;
+  color: var(--_text);
+  margin: 0;
+}
+
+:host([compact]) .story-statement {
+  font-size: 15px;
+}
+
+.keyword {
+  font-weight: 600;
+  color: var(--_accent);
+}
+
+.persona-text {
+  background: var(--_highlight);
+  padding: 2px 6px;
+  border-radius: var(--_radius-s);
+  font-weight: 500;
+}
+
+.action-text {
+  font-weight: 500;
+}
+
+.benefit-text {
+  font-style: italic;
+  color: var(--_muted);
+}
+
+.story-sections {
+  border-top: 1px solid var(--_border);
+}
+
+.section {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--_border);
+}
+
+.section:last-child {
+  border-bottom: none;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--_space-xs);
+  margin-bottom: var(--_space-s);
+}
+
+.section-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--_accent);
+}
+
+.section-icon svg {
+  width: 14px;
+  height: 14px;
+  fill: white;
+}
+
+/* Semantic section-icon colors (hardcoded by intent) */
+.section-icon.acceptance { background: #22c55e; }
+.section-icon.notes      { background: #f59e0b; }
+.section-icon.tasks      { background: #8b5cf6; }
+
+.section-title {
+  font-size: var(--_font-xs);
+  font-weight: 600;
+  color: var(--_muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.section-content {
+  color: var(--_text);
+  font-size: var(--_font-sm);
+  line-height: 1.6;
+}
+
+/* Slotted content styling */
+.section-content ::slotted(ul),
+.section-content ::slotted(ol) {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.section-content ::slotted(li) {
+  margin-bottom: 6px;
+}
+
+.section-content ::slotted(p) {
+  margin: 0;
+}
+
+/* Empty-slot fallback */
+.slot-fallback {
+  color: var(--_muted);
+  font-style: italic;
+}
+
+@media (max-width: 480px) {
+  .story-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .story-badges {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .story-card {
+    transition: none;
+  }
+}
+
+/* Minimal detail level */
+:host([detail="minimal"]) .story-card {
+  padding: var(--_space-xs);
+}
+
+:host([detail="minimal"]) .story-header {
+  display: none;
+}
+
+:host([detail="minimal"]) .story-sections {
+  display: none;
+}
+
+:host([detail="minimal"]) .story-body {
+  padding: var(--_space-xs) var(--_space-s);
+}
+
+:host([detail="minimal"]) .story-card {
+  cursor: pointer;
+}
+
+:host([detail="minimal"]) .story-card:hover {
+  box-shadow: var(--_shadow-hover);
+}
+
+:host([detail="minimal"]) .story-card:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 2px;
+}
+
+:host([detail="minimal"]) .story-statement {
+  font-size: var(--_font-sm);
+  margin: 0;
+}
+
+:host([detail="minimal"]) .story-id {
+  display: block;
+  margin-bottom: var(--_space-2xs);
+}
+
+:host([detail="minimal"]) .benefit-text {
+  display: none;
+}
+
+/* Compact detail level \u2014 hide empty sections */
+:host([detail="compact"]) .section[data-empty] {
+  display: none;
+}
+
+:host([detail="compact"]) .slot-fallback {
+  display: none;
+}
+`;var v=window.matchMedia("(prefers-reduced-motion: reduce)");var m=new Map;function f(r,t,e={}){let s=e.priority??10,a={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,a),customElements.define(r,t)}function n(r){return String(r).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}var p={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"/>'},x={says:{label:"Says",icon:p.messageCircle,color:"#3b82f6"},thinks:{label:"Thinks",icon:p.lightbulb,color:"#8b5cf6"},does:{label:"Does",icon:p.wrench,color:"#f59e0b"},feels:{label:"Feels",icon:p.heart,color:"#ef4444"}};var u=class r extends HTMLElement{static get observedAttributes(){return["persona","action","benefit","priority","points","status","epic","story-id","title","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;constructor(){super(),this.attachShadow({mode:"open"})}#s(){for(let t of[...this.children]){let e=t.getAttribute("slot");e&&!this.getAttribute(e)&&this.#t.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}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();for(let[a,o]of[["storyId","story-id"],["persona","persona"],["action","action"],["benefit","benefit"],["priority","priority"],["status","status"],["points","points"],["epic","epic"],["title","title"],["detail","detail"]])s[a]!=null&&this.setAttribute(o,String(s[a]));for(let a of["acceptanceCriteria","tasks","notes"])s[a]&&this.#t.set(a==="acceptanceCriteria"?"acceptance-criteria":a,s[a]);this.#e()}catch(e){console.warn(`[user-story] Failed to load src="${t}":`,e)}}connectedCallback(){this.#s(),this.storyId&&!this.id&&(this.id=this.storyId),this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#e(),this.setAttribute("data-upgraded","")}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t,e,s){e!==s&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(s):this.#e())}get persona(){return this._resolve("persona")||"user"}get action(){return this._resolve("action")||""}get benefit(){return this._resolve("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._resolve("epic")||""}get storyId(){return this._resolve("story-id")||""}get storyTitle(){return this._resolve("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 a=document.createElement("header"),o=document.createElement("h3");o.textContent=this.storyTitle||this.storyId||"Story Detail";let c=document.createElement("button");c.type="submit",c.setAttribute("aria-label","Close"),c.textContent="\xD7",a.appendChild(o),a.appendChild(c);let l=document.createElement("section"),d=document.createElement("user-story");for(let i of this.getAttributeNames())i==="detail"||i==="compact"||i==="data-upgraded"||i==="draggable"||i==="data-id"||i==="data-quadrant"||d.setAttribute(i,this.getAttribute(i));let b=[...this.children].some(i=>i.getAttribute("slot")&&i.tagName!=="DIALOG");d.setAttribute("detail",b?"full":"compact"),d.removeAttribute("id");for(let i of[...this.children])i.tagName!=="DIALOG"&&d.appendChild(i.cloneNode(!0));l.appendChild(d),s.appendChild(a),s.appendChild(l),e.innerHTML="",e.appendChild(s),e.addEventListener("close",()=>{e.innerHTML=""},{once:!0}),e.showModal()}#e(){let t=r.PRIORITIES[this.priority]||r.PRIORITIES.medium,e=r.STATUSES[this.status]||r.STATUSES.backlog,s=this._detailLevel,a=this.storyId?`User story: ${n(this.storyId)}`:"User story";if(s==="minimal"){this.shadowRoot.innerHTML=`
+        <style>${h}</style>
+        <article class="story-card story-card--minimal" role="article" aria-label="${a}"
+          tabindex="0" title="Click to view full story">
+          <div class="story-body">
+            ${this.storyId?`<span class="story-id">${n(this.storyId)}</span>`:""}
+            <p class="story-statement story-statement--minimal">${n(this._minimalLabel||"[describe the action]")}</p>
+          </div>
+        </article>
+      `;let o=this.shadowRoot.querySelector(".story-card--minimal");o.addEventListener("click",()=>this.showDetail()),o.addEventListener("keydown",c=>{(c.key==="Enter"||c.key===" ")&&(c.preventDefault(),this.showDetail())})}else this.shadowRoot.innerHTML=`
+        <style>${h}</style>
+
+        <article class="story-card story-card--${s}" part="card" role="article" aria-label="${a}">
+          <header class="story-header" part="header">
+            <div class="story-meta">
+              ${this.storyId?`<span class="story-id" part="id">${n(this.storyId)}</span>`:""}
+              ${this.epic?`<span class="epic-badge" part="epic">${n(this.epic)}</span>`:""}
+            </div>
+            <div class="story-badges">
+              <span class="priority-badge" part="priority"
+                style="color: ${t.color}; background: ${t.bg};"
+              >${n(t.label)}</span>
+              <span class="status-badge" part="status"
+                style="color: ${e.color}; background: ${e.bg};"
+              >${n(e.label)}</span>
+              ${this.points?`<span class="points-badge" part="points" title="Story points">${n(this.points)}</span>`:""}
+            </div>
+          </header>
+
+          <div class="story-body" part="body">
+            <p class="story-statement" part="statement">
+              <span class="keyword">As a</span>
+              <span class="persona-text">${n(this.persona)}</span>,
+              <span class="keyword">I want</span>
+              <span class="action-text">${n(this.action||"[describe the action]")}</span>${this.benefit?`
+              <span class="keyword">so that</span>
+              <span class="benefit-text">${n(this.benefit)}</span>`:""}
+            </p>
+          </div>
+
+          <div class="story-sections" part="sections">
+            <div class="section" part="section">
+              <div class="section-header">
+                <div class="section-icon acceptance">
+                  <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>
+                </div>
+                <span class="section-title">Acceptance Criteria</span>
+              </div>
+              <div class="section-content">
+                <slot name="acceptance-criteria">
+                  <em class="slot-fallback">No acceptance criteria defined.</em>
+                </slot>
+              </div>
+            </div>
+
+            <div class="section" part="section">
+              <div class="section-header">
+                <div class="section-icon tasks">
+                  <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>
+                </div>
+                <span class="section-title">Tasks</span>
+              </div>
+              <div class="section-content">
+                <slot name="tasks">
+                  <em class="slot-fallback">No tasks added yet.</em>
+                </slot>
+              </div>
+            </div>
+
+            <div class="section" part="section">
+              <div class="section-header">
+                <div class="section-icon notes">
+                  <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>
+                </div>
+                <span class="section-title">Notes</span>
+              </div>
+              <div class="section-content">
+                <slot name="notes">
+                  <em class="slot-fallback">No additional notes.</em>
+                </slot>
+              </div>
+            </div>
+          </div>
+        </article>
+      `,s==="compact"&&this.shadowRoot.querySelectorAll(".section").forEach(c=>{let l=c.querySelector("slot");l&&l.assignedNodes().length===0&&c.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};
+//# sourceMappingURL=user-story.js.map