vanilla-breeze 0.1.2 → 0.1.4

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

@@ -13,6 +13,7 @@ var v=`
     --_goals:       var(--user-persona-goals, #22c55e);
     --_frustrations: var(--user-persona-frustrations, #ef4444);
     --_behaviors:   var(--user-persona-behaviors, #8b5cf6);
+    --_stories:     var(--user-persona-stories, #3b82f6);
     --_shadow:    var(--user-persona-shadow, var(--shadow-md));
     --_space-2xs: var(--user-persona-space-2xs, var(--size-2xs, 0.25rem));
     --_space-xs:  var(--user-persona-space-xs, var(--size-xs, 0.5rem));
@@ -197,6 +198,53 @@ var v=`
   .section-icon.goals { background: var(--_goals); }
   .section-icon.frustrations { background: var(--_frustrations); }
   .section-icon.behaviors { background: var(--_behaviors); }
+  .section-icon.stories { background: var(--_stories); }
+
+  /* Stories section \u2014 auto-rendered list of related <user-story> elements */
+  .section-count {
+    margin-inline-start: var(--_space-2xs);
+    padding: 0.05em 0.5ch;
+    border-radius: 999px;
+    background: var(--color-surface-raised, oklch(95% 0 0));
+    color: var(--color-text-muted);
+    font-size: 0.75em;
+    font-weight: 600;
+  }
+  .story-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: var(--_space-2xs);
+  }
+  .story-item {
+    display: flex;
+    align-items: center;
+    gap: var(--_space-s);
+    padding-block: var(--_space-2xs);
+    border-block-end: 1px solid var(--color-border-muted, var(--color-border, #e5e7eb));
+  }
+  .story-item:last-child { border-block-end: none; }
+  .story-item a {
+    color: var(--color-interactive, currentColor);
+    text-decoration: none;
+    flex: 1;
+  }
+  .story-item a:hover { text-decoration: underline; }
+  .story-meta {
+    font-size: var(--_font-xs);
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0 0.5ch;
+    border: 1px solid var(--color-border-muted, var(--color-border, #e5e7eb));
+    border-radius: var(--_radius-m);
+  }
+  .empty-stories {
+    margin: 0;
+    color: var(--color-text-muted);
+    font-style: italic;
+  }
 
   .section-title {
     font-size: var(--_font-sm);
@@ -246,43 +294,55 @@ var v=`
       transition: none !important;
     }
   }
-`;var T=window.matchMedia("(prefers-reduced-motion: reduce)");var f=new Map;function g(r,e,a={}){let o=a.priority??10,s={impl:e,bundle:a.bundle,contract:a.contract,priority:o},t=f.get(r);if(customElements.get(r)){if(!t||t.priority>=o){t&&t.priority===o&&t.impl!==e&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${t.bundle}" (priority ${t.priority}). Skipping "${a.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${t.bundle}" cannot be replaced (customElements.define is permanent). "${a.bundle}" has higher priority but arrived late.`);return}if(t&&t.priority>=o){t.priority===o&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${t.bundle}". Skipping "${a.bundle}" (first wins at equal priority).`);return}f.set(r,s),customElements.define(r,e)}function n(r){return String(r).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function b(r){return r.split(" ").map(e=>e[0]).join("").toUpperCase().slice(0,2)}function x(r){let e=0;for(let o=0;o<r.length;o++)e=r.charCodeAt(o)+((e<<5)-e);return`hsl(${(e%360+360)%360}, 65%, 55%)`}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"/>'},N={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 _="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait",p=[32,64,128,256,512];function w(r){let e=0;for(let a=0;a<r.length;a++)e=r.charCodeAt(a)+((e<<5)-e);return e}function k(r){let e=p[0],a=Math.abs(r-e);for(let o=1;o<p.length;o++){let s=Math.abs(r-p[o]);s<a&&(e=p[o],a=s)}return e}function y(r,e=128){let a=w(String(r)),o=(a%100+100)%100,s=(a>>>16&1)===0?"female":"male",t=k(e);return`${_}/${s}/${t}/${o}.jpg`}function h(r){let e=0;for(let a=0;a<r.length;a++)e=r.charCodeAt(a)+((e<<5)-e);return e}var S=["Sarah Chen","Marcus Johnson","Aisha Patel","James O'Brien","Yuki Tanaka","Elena Rodriguez","David Kim","Fatima Al-Hassan","Lucas Silva","Priya Sharma","Noah Williams","Mei Lin","Carlos Mendez","Amara Osei","Henrik Larsson","Zara Ahmed"],C=["Product Manager","UX Designer","Frontend Developer","Data Analyst","Marketing Lead","QA Engineer","DevOps Lead","Content Strategist","Startup Founder","IT Director","Customer Success Lead","Research Scientist"],A=["San Francisco, CA","Austin, TX","London, UK","Toronto, CA","Berlin, DE","Tokyo, JP","Sydney, AU","S\xE3o Paulo, BR"],M=["I need tools that help me stay organized without slowing me down.","The dashboard is where I live \u2014 it has to be fast and reliable.","I want to understand the data, not fight the interface.","If it takes more than two clicks, I\u2019ll find another way.","Collaboration shouldn\u2019t mean endless notification noise.","I just want it to work the way I expect it to.","Give me the big picture first, then let me drill into details.","Accessibility isn\u2019t a nice-to-have \u2014 it\u2019s how I use the web."],z=["Streamline daily workflows","Reduce context-switching","Stay aligned with the team","Make data-driven decisions quickly","Ship features on a predictable cadence","Automate repetitive tasks","Improve onboarding experience","Keep documentation up to date"],$=["Too many disconnected tools","Slow page loads break focus","Unclear ownership of tasks","Settings that reset unexpectedly","Notifications that bury important updates","Poor mobile experience","Inconsistent design across features","No offline support"],q=["Checks dashboards every morning","Prefers keyboard shortcuts over mouse","Skims docs, reads deeply only when stuck","Shares screenshots in Slack","Batches email to twice a day","Tests features in incognito first","Bookmarks frequently used reports","Uses dark mode exclusively"],u=class extends HTMLElement{static get observedAttributes(){return["role","age","location","avatar","compact","src"]}#e=new Map;constructor(){super(),this.attachShadow({mode:"open"})}#a(){for(let e of[...this.children]){let a=e.getAttribute("slot");a&&!this.getAttribute(a)&&this.#e.set(a,e.textContent.trim())}}_resolve(e){return this.getAttribute(e)||this.#e.get(e)||""}async _loadSrc(e){if(e)try{let a=await fetch(e);if(!a.ok)throw new Error(`HTTP ${a.status}`);let o=await a.json();for(let s of["role","age","location","avatar"])o[s]&&this.setAttribute(s,o[s]);if(o.name&&!this.querySelector('[slot="name"]')){let s=document.createElement("h2");s.slot="name",s.textContent=o.name,this.appendChild(s)}if(o.quote&&!this.querySelector('[slot="quote"]')){let s=document.createElement("p");s.slot="quote",s.textContent=o.quote,this.appendChild(s)}for(let s of["bio","goals","frustrations","behaviors"])o[s]&&(Array.isArray(o[s])?this.#e.set(s,o[s]):this.#e.set(s,o[s]));this.#t()}catch(a){console.warn(`[user-persona] Failed to load src="${e}":`,a)}}connectedCallback(){this.#a(),this.hasAttribute("data-mock")?this.#o():this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#t(),this.setAttribute("data-upgraded",""),this.dispatchEvent(new CustomEvent("persona-ready",{bubbles:!0,composed:!0,detail:{name:this.personaName,role:this.personaRole}}))}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(e,a,o){a!==o&&this.shadowRoot&&(e==="src"&&this.isConnected?this._loadSrc(o):this.#t())}get personaName(){return this.querySelector('[slot="name"]')?.textContent?.trim()||this.#e.get("name")||"Unnamed Persona"}get personaRole(){return this.getAttribute("role")||""}get age(){return this.getAttribute("age")||""}get location(){return this.getAttribute("location")||""}get avatar(){return this.getAttribute("avatar")||""}get quote(){return this.querySelector('[slot="quote"]')?.textContent?.trim()||this.#e.get("quote")||""}get compact(){return this.hasAttribute("compact")}#o(){let e=this.dataset.seed||this.dataset.mock||String(Date.now()),a=t=>t[(h(e+t.length)%t.length+t.length)%t.length],o=(t,l)=>{let i=[];for(let c=0;c<l;c++)i.push(t[(h(e+c+t.length)%t.length+t.length)%t.length]);return[...new Set(i)]};if(!this.querySelector('[slot="name"]')){let t=document.createElement("h2");t.slot="name",t.textContent=a(S),this.appendChild(t)}if(this.getAttribute("role")||this.setAttribute("role",a(C)),this.getAttribute("age")||this.setAttribute("age",String(25+(h(e)%30+30)%30)),this.getAttribute("location")||this.setAttribute("location",a(A)),!this.getAttribute("avatar")){let t=this.querySelector('[slot="name"]')?.textContent?.trim()||"Persona";this.setAttribute("avatar",y(t,256))}if(!this.querySelector('[slot="quote"]')){let t=document.createElement("p");t.slot="quote",t.textContent=a(M),this.appendChild(t)}let s=(t,l)=>{if(this.querySelector(`[slot="${t}"]`))return;let i=document.createElement("ul");i.setAttribute("slot",t);for(let c of l){let m=document.createElement("li");m.textContent=c,i.appendChild(m)}this.appendChild(i)};s("goals",o(z,3)),s("frustrations",o($,3)),s("behaviors",o(q,3))}#t(){let e=this.personaName,a=this.personaRole,o=this.age,s=this.location,t=this.avatar,l=this.quote,i=x(e),c=t?`background:url(${n(t)}) center/cover`:`background:${i}`;this.shadowRoot.innerHTML=`
+`;var O=window.matchMedia("(prefers-reduced-motion: reduce)");var f=new Map;function g(r,e,t={}){let o=t.priority??10,i={impl:e,bundle:t.bundle,contract:t.contract,priority:o},s=f.get(r);if(customElements.get(r)){if(!s||s.priority>=o){s&&s.priority===o&&s.impl!==e&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${s.bundle}" (priority ${s.priority}). Skipping "${t.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${s.bundle}" cannot be replaced (customElements.define is permanent). "${t.bundle}" has higher priority but arrived late.`);return}if(s&&s.priority>=o){s.priority===o&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${s.bundle}". Skipping "${t.bundle}" (first wins at equal priority).`);return}f.set(r,i),customElements.define(r,e)}function a(r){return String(r).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function b(r){return r.split(" ").map(e=>e[0]).join("").toUpperCase().slice(0,2)}function y(r){let e=0;for(let o=0;o<r.length;o++)e=r.charCodeAt(o)+((e<<5)-e);return`hsl(${(e%360+360)%360}, 65%, 55%)`}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"/>'},L={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 _="https://cdn.jsdelivr.net/gh/faker-js/assets-person-portrait",p=[32,64,128,256,512];function S(r){let e=0;for(let t=0;t<r.length;t++)e=r.charCodeAt(t)+((e<<5)-e);return e}function w(r){let e=p[0],t=Math.abs(r-e);for(let o=1;o<p.length;o++){let i=Math.abs(r-p[o]);i<t&&(e=p[o],t=i)}return e}function x(r,e=128){let t=S(String(r)),o=(t%100+100)%100,i=(t>>>16&1)===0?"female":"male",s=w(e);return`${_}/${i}/${s}/${o}.jpg`}function u(r){let e=0;for(let t=0;t<r.length;t++)e=r.charCodeAt(t)+((e<<5)-e);return e}var k=["Sarah Chen","Marcus Johnson","Aisha Patel","James O'Brien","Yuki Tanaka","Elena Rodriguez","David Kim","Fatima Al-Hassan","Lucas Silva","Priya Sharma","Noah Williams","Mei Lin","Carlos Mendez","Amara Osei","Henrik Larsson","Zara Ahmed"],C=["Product Manager","UX Designer","Frontend Developer","Data Analyst","Marketing Lead","QA Engineer","DevOps Lead","Content Strategist","Startup Founder","IT Director","Customer Success Lead","Research Scientist"],A=["San Francisco, CA","Austin, TX","London, UK","Toronto, CA","Berlin, DE","Tokyo, JP","Sydney, AU","S\xE3o Paulo, BR"],M=["I need tools that help me stay organized without slowing me down.","The dashboard is where I live \u2014 it has to be fast and reliable.","I want to understand the data, not fight the interface.","If it takes more than two clicks, I\u2019ll find another way.","Collaboration shouldn\u2019t mean endless notification noise.","I just want it to work the way I expect it to.","Give me the big picture first, then let me drill into details.","Accessibility isn\u2019t a nice-to-have \u2014 it\u2019s how I use the web."],$=["Streamline daily workflows","Reduce context-switching","Stay aligned with the team","Make data-driven decisions quickly","Ship features on a predictable cadence","Automate repetitive tasks","Improve onboarding experience","Keep documentation up to date"],z=["Too many disconnected tools","Slow page loads break focus","Unclear ownership of tasks","Settings that reset unexpectedly","Notifications that bury important updates","Poor mobile experience","Inconsistent design across features","No offline support"],q=["Checks dashboards every morning","Prefers keyboard shortcuts over mouse","Skims docs, reads deeply only when stuck","Shares screenshots in Slack","Batches email to twice a day","Tests features in incognito first","Bookmarks frequently used reports","Uses dark mode exclusively"],h=class extends HTMLElement{static get observedAttributes(){return["role","age","location","avatar","compact","src","data-list-stories","id"]}#e=new Map;#t=null;constructor(){super(),this.attachShadow({mode:"open"})}relatedStories(){if(!this.id)return[];let e=this.getRootNode(),t=e.querySelectorAll?e:document;return Array.from(t.querySelectorAll(`user-story[persona-id="${E(this.id)}"]`))}#a(){for(let e of[...this.children]){let t=e.getAttribute("slot");t&&!this.getAttribute(t)&&this.#e.set(t,e.textContent.trim())}}_resolve(e){return this.getAttribute(e)||this.#e.get(e)||""}get data(){return{name:this.personaName,role:this.personaRole||void 0,age:this.age||void 0,location:this.location||void 0,avatar:this.avatar||void 0,quote:this.quote||void 0,bio:this.#e.get("bio")||void 0,goals:this.#e.get("goals")||void 0,frustrations:this.#e.get("frustrations")||void 0,behaviors:this.#e.get("behaviors")||void 0}}set data(e){!e||typeof e!="object"||(this._applyData(e),this.shadowRoot&&this.#s(),this.dispatchEvent(new CustomEvent("user-persona:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0,composed:!0})))}_applyData(e){for(let t of["role","age","location","avatar"])e[t]&&this.setAttribute(t,String(e[t]));if(e.name&&!this.querySelector('[slot="name"]')){let t=document.createElement("h2");t.slot="name",t.textContent=String(e.name),this.appendChild(t)}if(e.quote&&!this.querySelector('[slot="quote"]')){let t=document.createElement("p");t.slot="quote",t.textContent=String(e.quote),this.appendChild(t)}for(let t of["bio","goals","frustrations","behaviors"])e[t]&&this.#e.set(t,String(e[t]))}async _loadSrc(e){if(e)try{let t=await fetch(e);if(!t.ok)throw new Error(`HTTP ${t.status}`);let o=await t.json();this._applyData(o),this.#s()}catch(t){console.warn(`[user-persona] Failed to load src="${e}":`,t)}}connectedCallback(){this.#a(),this.hasAttribute("data-mock")?this.#n():this.hasAttribute("src")&&this._loadSrc(this.getAttribute("src")),this.#s(),this.#o(),this.setAttribute("data-upgraded",""),this.dispatchEvent(new CustomEvent("persona-ready",{bubbles:!0,composed:!0,detail:{name:this.personaName,role:this.personaRole}}))}disconnectedCallback(){this.removeAttribute("data-upgraded"),this.#t?.disconnect(),this.#t=null}#o(){if(!this.hasAttribute("data-list-stories")||!this.id){this.#t?.disconnect(),this.#t=null;return}this.#t||(this.#t=new MutationObserver(()=>this.#i()),this.#t.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["persona-id"]}))}#i(){if(!this.shadowRoot)return;let e=this.shadowRoot.querySelector("[data-stories-section]");e&&(e.outerHTML=this.#r())}#r(){if(!this.hasAttribute("data-list-stories")||!this.id)return"";let e=this.relatedStories();return`
+      <section class="section" part="section-stories" data-stories-section>
+        <div class="section-header">
+          <div class="section-icon stories" aria-hidden="true">
+            <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
+          </div>
+          <span class="section-title">Stories <span class="section-count">${e.length}</span></span>
+        </div>
+        <div class="section-content">
+          ${e.length===0?'<p class="empty-stories">No user stories reference this persona yet.</p>':`<ul class="story-list">${e.map(t=>{let o=t.id||t.getAttribute("story-id")||"",i=t.querySelector('[slot="action"]')?.textContent?.trim()||t.getAttribute("action")||t.id||"untitled",s=t.getAttribute("priority")||"",n=t.getAttribute("status")||"";return`<li class="story-item" data-priority="${a(s)}" data-status="${a(n)}">${o?`<a href="#${a(o)}">${a(i)}</a>`:`<span>${a(i)}</span>`}${s?`<span class="story-meta">${a(s)}</span>`:""}${n?`<span class="story-meta">${a(n)}</span>`:""}</li>`}).join("")}</ul>`}
+        </div>
+      </section>
+    `}attributeChangedCallback(e,t,o){if(!(t===o||!this.shadowRoot)){if(e==="src"&&this.isConnected){this._loadSrc(o);return}(e==="data-list-stories"||e==="id")&&this.#o(),this.#s()}}get personaName(){return this.querySelector('[slot="name"]')?.textContent?.trim()||this.#e.get("name")||"Unnamed Persona"}get personaRole(){return this.getAttribute("role")||""}get age(){return this.getAttribute("age")||""}get location(){return this.getAttribute("location")||""}get avatar(){return this.getAttribute("avatar")||""}get quote(){return this.querySelector('[slot="quote"]')?.textContent?.trim()||this.#e.get("quote")||""}get compact(){return this.hasAttribute("compact")}#n(){let e=this.dataset.seed||this.dataset.mock||String(Date.now()),t=s=>s[(u(e+s.length)%s.length+s.length)%s.length],o=(s,n)=>{let c=[];for(let l=0;l<n;l++)c.push(s[(u(e+l+s.length)%s.length+s.length)%s.length]);return[...new Set(c)]};if(!this.querySelector('[slot="name"]')){let s=document.createElement("h2");s.slot="name",s.textContent=t(k),this.appendChild(s)}if(this.getAttribute("role")||this.setAttribute("role",t(C)),this.getAttribute("age")||this.setAttribute("age",String(25+(u(e)%30+30)%30)),this.getAttribute("location")||this.setAttribute("location",t(A)),!this.getAttribute("avatar")){let s=this.querySelector('[slot="name"]')?.textContent?.trim()||"Persona";this.setAttribute("avatar",x(s,256))}if(!this.querySelector('[slot="quote"]')){let s=document.createElement("p");s.slot="quote",s.textContent=t(M),this.appendChild(s)}let i=(s,n)=>{if(this.querySelector(`[slot="${s}"]`))return;let c=document.createElement("ul");c.setAttribute("slot",s);for(let l of n){let m=document.createElement("li");m.textContent=l,c.appendChild(m)}this.appendChild(c)};i("goals",o($,3)),i("frustrations",o(z,3)),i("behaviors",o(q,3))}#s(){let e=this.personaName,t=this.personaRole,o=this.age,i=this.location,s=this.avatar,n=this.quote,c=y(e),l=s?`background:url(${a(s)}) center/cover`:`background:${c}`;this.shadowRoot.innerHTML=`
       <style>${v}</style>
 
       <article class="persona-card" part="card" role="article"
-        aria-label="User persona: ${n(e)}">
+        aria-label="User persona: ${a(e)}">
 
         <header class="persona-header" part="header">
-          <div class="avatar" part="avatar" style="${c}"
-            role="img" aria-label="Avatar for ${n(e)}">
-            ${t?"":n(b(e))}
+          <div class="avatar" part="avatar" style="${l}"
+            role="img" aria-label="Avatar for ${a(e)}">
+            ${s?"":a(b(e))}
           </div>
           <div class="header-info">
             <div class="persona-name-wrap" part="name">
-              <slot name="name"><h2 class="persona-name-fallback">${n(e)}</h2></slot>
+              <slot name="name"><h2 class="persona-name-fallback">${a(e)}</h2></slot>
             </div>
-            ${a?`<p class="persona-role" part="role">${n(a)}</p>`:""}
+            ${t?`<p class="persona-role" part="role">${a(t)}</p>`:""}
             <div class="persona-meta" part="meta">
               ${o?`
                 <span class="meta-item">
                   <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
-                  ${n(o)} years old
+                  ${a(o)} years old
                 </span>
               `:""}
-              ${s?`
+              ${i?`
                 <span class="meta-item">
                   <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
-                  ${n(s)}
+                  ${a(i)}
                 </span>
               `:""}
             </div>
           </div>
         </header>
 
-        ${l||this.querySelector('[slot="quote"]')?`
+        ${n||this.querySelector('[slot="quote"]')?`
           <div class="persona-quote" part="quote">
             <span class="quote-mark" aria-hidden="true">&ldquo;</span>
-            <div class="quote-text-wrap"><slot name="quote"><p class="quote-text">${n(l)}</p></slot></div>
+            <div class="quote-text-wrap"><slot name="quote"><p class="quote-text">${a(n)}</p></slot></div>
           </div>
         `:""}
 
@@ -334,7 +394,9 @@ var v=`
               <slot name="behaviors">No behaviors documented.</slot>
             </div>
           </div>
+
+          ${this.#r()}
         </div>
       </article>
-    `}};g("user-persona",u);export{u as UserPersona};
+    `}};function E(r){return typeof CSS<"u"&&CSS.escape?CSS.escape(String(r)):String(r).replace(/["\\]/g,"\\$&")}g("user-persona",h);export{h as UserPersona};
 //# sourceMappingURL=user-persona.js.map

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

@@ -197,10 +197,11 @@ var h=`
   fill: white;
 }
 
-/* Semantic section-icon colors (hardcoded by intent) */
-.section-icon.acceptance { background: #22c55e; }
-.section-icon.notes      { background: #f59e0b; }
-.section-icon.tasks      { background: #8b5cf6; }
+/* Semantic section-icon colors \u2014 driven by VB theme tokens so they shift
+   with the active theme rather than fighting it. */
+.section-icon.acceptance { background: var(--color-success, #22c55e); }
+.section-icon.notes      { background: var(--color-warning, #f59e0b); }
+.section-icon.tasks      { background: var(--color-accent,  #8b5cf6); }
 
 .section-title {
   font-size: var(--_font-xs);
@@ -320,9 +321,9 @@ var h=`
 :host([detail="compact"]) .slot-fallback {
   display: none;
 }
-`;var v=window.matchMedia("(prefers-reduced-motion: reduce)");var m=new Map;function f(i,t,s={}){let o=s.priority??10,e={impl:t,bundle:s.bundle,contract:s.contract,priority:o},r=m.get(i);if(customElements.get(i)){if(!r||r.priority>=o){r&&r.priority===o&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${s.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${s.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=o){r.priority===o&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${r.bundle}". Skipping "${s.bundle}" (first wins at equal priority).`);return}m.set(i,e),customElements.define(i,t)}function c(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function b(i){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${i}</svg>`}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"/>',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"/>'},_={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 i 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;constructor(){super(),this.attachShadow({mode:"open"})}#s(){for(let t of[...this.children]){let s=t.getAttribute("slot");s&&this.#t.set(s,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}async _loadSrc(t){if(t)try{let s=await fetch(t);if(!s.ok)throw new Error(`HTTP ${s.status}`);let o=await s.json();for(let[e,r]of[["storyId","story-id"],["personaId","persona-id"],["priority","priority"],["status","status"],["points","points"],["epic","epic"],["detail","detail"]])o[e]!=null&&this.setAttribute(r,String(o[e]));if(o.persona&&!this.querySelector('[slot="persona"]')){let e=document.createElement("span");e.slot="persona",e.textContent=o.persona,this.appendChild(e)}if(o.action&&!this.querySelector('[slot="action"]')){let e=document.createElement("span");e.slot="action",e.textContent=o.action,this.appendChild(e)}if(o.benefit&&!this.querySelector('[slot="benefit"]')){let e=document.createElement("span");e.slot="benefit",e.textContent=o.benefit,this.appendChild(e)}if(o.title&&!this.querySelector('[slot="title"]')){let e=document.createElement("h3");e.slot="title",e.textContent=o.title,this.appendChild(e)}for(let e of["acceptance-criteria","tasks","notes"]){let r=e==="acceptance-criteria"?"acceptanceCriteria":e;if(o[r]&&!this.querySelector(`[slot="${e}"]`))if(Array.isArray(o[r])){let a=document.createElement("ul");a.slot=e;for(let d of o[r]){let l=document.createElement("li");l.textContent=d,a.appendChild(l)}this.appendChild(a)}else{let a=document.createElement("p");a.slot=e,a.textContent=o[r],this.appendChild(a)}}this.#s(),this.#e()}catch(s){console.warn(`[user-story] Failed to load src="${t}":`,s)}}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,s,o){s!==o&&this.shadowRoot&&(t==="src"&&this.isConnected?this._loadSrc(o):this.#e())}get persona(){return this.querySelector('[slot="persona"]')?.textContent?.trim()||this.#t.get("persona")||"user"}get personaId(){return this.getAttribute("persona-id")||""}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){i.STATUSES[t]&&(this.setAttribute("status",t),this.dispatchEvent(new CustomEvent("status-changed",{detail:{status:t,storyId:this.storyId},bubbles:!0,composed:!0})))}updatePriority(t){i.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"}`,s=document.getElementById(t);s||(s=document.createElement("dialog"),s.id=t,s.setAttribute("data-size","l"),document.body.appendChild(s));let o=document.createElement("form");o.method="dialog";let e=document.createElement("header"),r=document.createElement("h3");r.textContent=this.storyTitle||this.storyId||"Story Detail";let a=document.createElement("button");a.type="submit",a.setAttribute("aria-label","Close"),a.textContent="\xD7",e.appendChild(r),e.appendChild(a);let d=document.createElement("section"),l=document.createElement("user-story");for(let n of this.getAttributeNames())n==="detail"||n==="compact"||n==="data-upgraded"||n==="draggable"||n==="data-id"||n==="data-quadrant"||l.setAttribute(n,this.getAttribute(n));let y=[...this.children].some(n=>n.getAttribute("slot")&&n.tagName!=="DIALOG");l.setAttribute("detail",y?"full":"compact"),l.removeAttribute("id");for(let n of[...this.children])n.tagName!=="DIALOG"&&l.appendChild(n.cloneNode(!0));d.appendChild(l),o.appendChild(e),o.appendChild(d),s.innerHTML="",s.appendChild(o),s.addEventListener("close",()=>{s.innerHTML=""},{once:!0}),s.showModal()}#e(){let t=i.PRIORITIES[this.priority]||i.PRIORITIES.medium,s=i.STATUSES[this.status]||i.STATUSES.backlog,o=this._detailLevel,e=this.storyId?`User story: ${c(this.storyId)}`:"User story";if(o==="minimal"){this.shadowRoot.innerHTML=`
+`;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 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;constructor(){super(),this.attachShadow({mode:"open"})}#s(){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.#s(),this.shadowRoot&&this.#e(),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 a=document.createElement("ul");a.slot=e;for(let o of t[s]){let n=document.createElement("li");n.textContent=String(o),a.appendChild(n)}this.appendChild(a)}else{let a=document.createElement("p");a.slot=e,a.textContent=String(t[s]),this.appendChild(a)}}}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.#s(),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.querySelector('[slot="persona"]')?.textContent?.trim()||this.#t.get("persona")||"user"}get personaId(){return this.getAttribute("persona-id")||""}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 a=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",a.appendChild(o),a.appendChild(n);let l=document.createElement("section"),p=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"||p.setAttribute(i,this.getAttribute(i)??"");let y=[...this.children].some(i=>i.getAttribute("slot")&&i.tagName!=="DIALOG");p.setAttribute("detail",y?"full":"compact"),p.removeAttribute("id");for(let i of[...this.children])i.tagName!=="DIALOG"&&p.appendChild(i.cloneNode(!0));l.appendChild(p),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: ${c(this.storyId)}`:"User story";if(this.shadowRoot){if(s==="minimal"){this.shadowRoot.innerHTML=`
         <style>${h}</style>
-        <article class="story-card story-card--minimal" role="article" aria-label="${e}"
+        <article class="story-card story-card--minimal" role="article" aria-label="${a}"
           tabindex="0">
           <div class="story-body">
             ${this.storyId?`<span class="story-id">${c(this.storyId)}</span>`:""}
@@ -331,10 +332,10 @@ var h=`
             </div>
           </div>
         </article>
-      `;let r=this.shadowRoot.querySelector(".story-card--minimal");r.addEventListener("click",()=>this.showDetail()),r.addEventListener("keydown",a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),this.showDetail())})}else this.shadowRoot.innerHTML=`
+      `;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=`
         <style>${h}</style>
 
-        <article class="story-card story-card--${o}" part="card" role="article" aria-label="${e}">
+        <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">${c(this.storyId)}</span>`:""}
@@ -345,8 +346,8 @@ var h=`
                 style="color: ${t.color}; background: ${t.bg};"
               >${c(t.label)}</span>
               <span class="status-badge" part="status"
-                style="color: ${s.color}; background: ${s.bg};"
-              >${c(s.label)}</span>
+                style="color: ${e.color}; background: ${e.bg};"
+              >${c(e.label)}</span>
               ${this.points?`<span class="points-badge" part="points">${c(this.points)}</span>`:""}
             </div>
           </header>
@@ -354,7 +355,7 @@ var h=`
           <div class="story-body" part="body">
             <p class="story-statement" part="statement">
               <span class="keyword">As a</span>
-              ${this.personaId?`<a class="persona-text persona-text--link" href="#${c(this.personaId)}">${b(p.user)} <slot name="persona"><span>user</span></slot></a>`:'<span class="persona-text"><slot name="persona"><span>user</span></slot></span>'},
+              ${this.personaId?`<a class="persona-text persona-text--link" href="#${c(this.personaId)}">${b(d.user)} <slot name="persona"><span>user</span></slot></a>`:'<span class="persona-text"><slot name="persona"><span>user</span></slot></span>'},
               <span class="keyword">I want</span>
               <span class="action-text"><slot name="action"><span>[describe the action]</span></slot></span>${this.benefit||this.querySelector('[slot="benefit"]')?`
               <span class="keyword">so that</span>
@@ -406,5 +407,5 @@ var h=`
             </div>
           </div>
         </article>
-      `,o==="compact"&&this.shadowRoot.querySelectorAll(".section").forEach(a=>{let d=a.querySelector("slot");d&&d.assignedNodes().length===0&&a.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};
+      `,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};
 //# sourceMappingURL=user-story.js.map

package/dist/cdn/components/version-switcher.js

@@ -0,0 +1,17 @@
+var $=window.matchMedia("(prefers-reduced-motion: reduce)");var g=new Map;function p(h,t,e={}){let i=e.priority??10,s={impl:t,bundle:e.bundle,contract:e.contract,priority:i},r=g.get(h);if(customElements.get(h)){if(!r||r.priority>=i){r&&r.priority===i&&r.impl!==t&&console.warn(`[VB Bundle] Tag <${h}> already registered by "${r.bundle}" (priority ${r.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${h}> defined by "${r.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(r&&r.priority>=i){r.priority===i&&console.warn(`[VB Bundle] Tag <${h}> already registered by "${r.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}g.set(h,s),customElements.define(h,t)}var u=class extends HTMLElement{#t=[];#e;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,i,s){t.addEventListener(e,i,s),this.#t.push(()=>t.removeEventListener(e,i,s))}setup(){}teardown(){}setState(t,e){this.#e||(this.#e=this.attachInternals());let i=this.#e.states;try{e?i.add(t):i.delete(t)}catch{let s=`--${t}`;e?i.add(s):i.delete(s)}}_adoptInternals(t){this.#e||(this.#e=t)}};var f=CSS.supports("anchor-name","--x"),A=CSS.supports("position-area","bottom"),y=0,m=class extends u{#t=null;#e=null;#i=null;#s=null;setup(){this.id||(this.id=`pop-over-${++y}`);let t=this.dataset.mode||"auto";this.hasAttribute("popover")||this.setAttribute("popover",t),this.#n(),this.#a(),this.#i=e=>{let i=e.newState==="open"?"show":"hide";this.dispatchEvent(new CustomEvent(`pop-over:${i}`,{detail:{state:e.newState},bubbles:!0,composed:!0})),!f&&e.newState==="open"&&this.#t&&this.#o()},this.listen(this,"beforetoggle",this.#i),f||(this.#s=()=>{this.matches(":popover-open")&&this.#t&&this.#o()},this.listen(window,"resize",this.#s),this.listen(window,"scroll",this.#s,{capture:!0,passive:!0}))}show(){this.matches(":popover-open")||this.showPopover()}hide(){this.matches(":popover-open")&&this.hidePopover()}toggle(){this.matches(":popover-open")?this.hide():this.show()}get open(){return this.matches(":popover-open")}#n(){let t=this.dataset.anchor;t?this.#t=document.getElementById(t)||document.querySelector(t):this.#t=document.querySelector(`[popovertarget="${CSS.escape(this.id)}"]`)}#a(){if(!(!this.#t||!f)&&(this.#e=`--pop-over-anchor-${this.id}`,this.#t.style.setProperty("anchor-name",this.#e),this.style.setProperty("position-anchor",this.#e),this.setAttribute("data-anchor-name",this.#e||""),!A)){let t=this.dataset.position||"bottom";this.#h(t)}}#h(t){let e="var(--_pop-over-offset, var(--size-xs))",i={top:{bottom:`calc(anchor(top) + ${e})`,left:"anchor(left)"},bottom:{top:`calc(anchor(bottom) + ${e})`,left:"anchor(left)"},left:{right:`calc(anchor(left) + ${e})`,top:"anchor(top)"},right:{left:`calc(anchor(right) + ${e})`,top:"anchor(top)"}},s=t.split("-")[0],r=i[s]||i.bottom;Object.entries(r).forEach(([n,a])=>this.style.setProperty(n,a))}#o(){if(!this.#t)return;let t=this.#t.getBoundingClientRect(),e=this.dataset.position||"bottom",i=this.#l(),s,r;switch(e.split("-")[0]){case"top":s=t.top-this.offsetHeight-i,r=t.left;break;case"left":s=t.top,r=t.left-this.offsetWidth-i;break;case"right":s=t.top,r=t.right+i;break;default:s=t.bottom+i,r=t.left;break}e.endsWith("-end")&&(e.startsWith("top")||e.startsWith("bottom")?r=t.right-this.offsetWidth:s=t.bottom-this.offsetHeight),this.style.position="fixed",this.style.top=`${Math.round(s)}px`,this.style.left=`${Math.round(r)}px`,this.style.margin="0"}#l(){let t={none:0,xs:4,s:8,m:16,l:24};return t[this.dataset.offset]??t.xs}};p("pop-over",m);var b=class extends u{setup(){this.querySelector("[data-controls]")||this.#t()}#t(){let t=document.createElement("nav");t.setAttribute("data-controls",""),t.setAttribute("aria-label","Change view controls"),t.innerHTML=`
+      <button type="button" data-action="tracking" aria-pressed="true">
+        Tracking
+      </button>
+      <button type="button" data-action="final" aria-pressed="false">
+        Final
+      </button>
+      <button type="button" data-action="original" aria-pressed="false">
+        Original
+      </button>
+    `,this.prepend(t),t.addEventListener("click",e=>{let s=e.target.closest("[data-action]")?.dataset.action;if(s){s==="tracking"?this.removeAttribute("view"):this.setAttribute("view",s);for(let r of t.querySelectorAll("button"))r.setAttribute("aria-pressed",String(r.dataset.action===s));this.dispatchEvent(new CustomEvent("change-set:view",{detail:{view:s},bubbles:!0}))}})}get view(){return this.getAttribute("view")??"tracking"}set view(t){if(this.view===t)return;t==="tracking"?this.removeAttribute("view"):this.setAttribute("view",t);let i=this.querySelector("[data-controls]");if(i)for(let s of i.querySelectorAll("button"))s.setAttribute("aria-pressed",String(s.dataset.action===t));this.dispatchEvent(new CustomEvent("change-set:view",{detail:{view:t,source:"api"},bubbles:!0}))}};p("change-set",b);function w(h,t){let e=String(h??"").split(`
+`),i=String(t??"").split(`
+`),s=e.length,r=i.length,n=Array.from({length:s+1},()=>new Array(r+1).fill(0));for(let l=1;l<=s;l++)for(let d=1;d<=r;d++)e[l-1]===i[d-1]?n[l][d]=n[l-1][d-1]+1:n[l][d]=Math.max(n[l-1][d],n[l][d-1]);let a=[],c=s,o=r;for(;c>0||o>0;)c>0&&o>0&&e[c-1]===i[o-1]?(a.unshift({type:"eq",text:e[c-1]}),c-=1,o-=1):o>0&&(c===0||n[c][o-1]>=n[c-1][o])?(a.unshift({type:"add",text:i[o-1]}),o-=1):(a.unshift({type:"del",text:e[c-1]}),c-=1);return a}function E(h){let t=document.createDocumentFragment(),e=document.createElement("pre");e.className="text-diff";for(let i of h)if(i.type==="eq")e.appendChild(document.createTextNode(`${i.text}
+`));else if(i.type==="add"){let s=document.createElement("ins");s.textContent=`${i.text}
+`,e.appendChild(s)}else if(i.type==="del"){let s=document.createElement("del");s.textContent=`${i.text}
+`,e.appendChild(s)}return t.appendChild(e),t}var x=0,v=class extends u{static observedAttributes=["data-versions","data-src"];#t=[];#e=null;#i;#s;#n;#a=null;#h=null;#o=null;setup(){this.#l(),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Version"),this.#$(),this.#N(),this.#c(),this.#d(),this.#p(),this.hasAttribute("data-page-info-target")&&this.#x(),this.#t.length===0&&(this.getAttribute("data-src")||this.#g())&&this.#w()}attributeChangedCallback(t,e,i){!this.isConnected||e===i||(t==="data-versions"&&this.refresh(),t==="data-src"&&this.#w())}#l(){let t=null,e=this.getAttribute("data-versions");if(e)try{t=JSON.parse(e)}catch(i){this.#r("Failed to parse data-versions JSON",{error:i})}if(!t){let i=this.querySelector(':scope > script[type="application/json"][data-versions]');if(i?.textContent.trim())try{t=JSON.parse(i.textContent)}catch(s){this.#r("Failed to parse <script data-versions> JSON",{error:s})}}Array.isArray(t)||(t=[]),this.#t=t.filter(i=>i&&typeof i.id=="string"),this.#e=this.#b()}#b(){if(this.#t.length===0)return null;let t=this.#t.find(i=>i.current===!0);if(t)return t.id;let e=document.querySelector('meta[itemprop="version"]')?.getAttribute("content");if(e){let i=this.#t.find(s=>s.id===e);if(i)return i.id}return this.#t[0].id}#v(){let t=this.getAttribute("data-mode");return t==="releases"||t==="history"?t:new Set(this.#t.map(i=>i.url).filter(Boolean)).size>1?"releases":"history"}#g(){return document.querySelector('meta[name="vb:versions-manifest"]')?.getAttribute("content")}async#w(){let t=this.getAttribute("data-src")||this.#g();if(!t)return;this.#o=t,this.#c();let e;try{let i=await fetch(t,{credentials:"same-origin"});if(!i.ok)throw new Error(`Fetch failed (${i.status}) for ${t}`);e=await i.json()}catch(i){this.#o=null,this.#r(`Failed to load versions manifest: ${i.message}`,{error:i}),this.#c();return}if(this.#o===t){if(this.#o=null,!Array.isArray(e)){this.#r(`Manifest is not a JSON array: ${t}`),this.#c();return}this.#t=e.filter(i=>i&&typeof i.id=="string"),this.#e=this.#b(),this.#c(),this.#d(),this.#p(),this.#a&&this.#f()}}#p(){if(!this.hasAttribute("data-banner"))return;let t=this.#t.find(n=>n.id===this.#e),e=this.#t.find(n=>!n.archived&&!n.draft);if(this.#h?.remove(),this.#h=null,!t?.archived||!e||e.id===t.id)return;let i=document.createElement("aside");i.className="version-switcher-banner",i.setAttribute("role","region"),i.setAttribute("aria-live","polite"),i.setAttribute("aria-label","Archived version notice");let s=document.createElement("span");s.className="version-switcher-banner-text",s.textContent=`You're viewing ${t.label||t.id} (archived).`;let r=document.createElement("a");r.className="version-switcher-banner-link",e.url&&(r.href=e.url),r.textContent=`Latest: ${e.label||e.id} \u2192`,i.append(s," ",r),this.prepend(i),this.#h=i}#x(){let t=this.getAttribute("data-page-info-target");if(!t)return;let e=document.getElementById(t);if(!e||e.localName!=="page-info"){this.#r(`data-page-info-target: no <page-info id="${t}"> found.`);return}this.#i.hidden=!0;let i=()=>{let r=e.querySelector(".page-info-panel");return r?(this.#f(r),!0):!1};if(i())return;let s=new MutationObserver(()=>{i()&&s.disconnect()});s.observe(e,{childList:!0,subtree:!0}),setTimeout(()=>{this.#a||(s.disconnect(),this.#r(`<page-info id="${t}"> never rendered .page-info-panel within 5s.`))},5e3)}#f(t){let e=t||this.#a?.parentNode;if(!e)return;let i=this.#a;if(!i){i=document.createElement("section"),i.className="version-switcher-panel-section",i.setAttribute("aria-label",this.getAttribute("aria-label")||"Versions");let r=document.createElement("h3");r.className="version-switcher-panel-heading",r.textContent=this.#v()==="history"?"History":"Versions",i.appendChild(r),e.appendChild(i),this.#a=i}let s=i.querySelector("ul.version-switcher-panel-list");if(s||(s=document.createElement("ul"),s.className="version-switcher-panel-list",i.appendChild(s)),s.replaceChildren(),this.#t.length===0){let r=document.createElement("li");r.className="version-switcher-empty",r.textContent=this.#o?"Loading versions\u2026":"No versions available.",s.appendChild(r);return}for(let r of this.#t)s.appendChild(this.#E(r))}#$(){this.#i=document.createElement("button"),this.#i.type="button",this.#i.className="version-switcher-trigger",this.#i.setAttribute("aria-haspopup","dialog"),this.#i.setAttribute("aria-expanded","false"),this.appendChild(this.#i)}#N(){let t=`version-switcher-${++x}`;this.#i.setAttribute("popovertarget",t),this.#s=document.createElement("pop-over"),this.#s.id=t,this.#s.className="version-switcher-popover",this.#s.dataset.position="bottom-end",this.#s.setAttribute("role","dialog"),this.#s.setAttribute("aria-label",this.getAttribute("aria-label")||"Version");let e=document.createElement("h3");e.className="version-switcher-heading",e.textContent=this.#v()==="history"?"History":"Versions",this.#n=document.createElement("ul"),this.#n.className="version-switcher-list",this.#n.setAttribute("role","list"),this.#s.append(e,this.#n),this.appendChild(this.#s),this.listen(this.#s,"pop-over:show",()=>{this.#i.setAttribute("aria-expanded","true"),this.dispatchEvent(new CustomEvent("version-switcher:open",{bubbles:!0}));let i=this.#n.querySelector('[data-current="true"] button')||this.#n.querySelector("button");requestAnimationFrame(()=>i?.focus())}),this.listen(this.#s,"pop-over:hide",()=>{this.#i.setAttribute("aria-expanded","false"),this.dispatchEvent(new CustomEvent("version-switcher:close",{bubbles:!0}))}),this.listen(this.#n,"keydown",this.#S)}#c(){let t=this.#t.find(n=>n.id===this.#e),e=!!this.#o&&this.#t.length===0,i=e?"Loading\u2026":t?.label||t?.id||"Version";this.#i.replaceChildren();let s=document.createElement("span");s.className="version-switcher-trigger-label",s.textContent=i;let r=document.createElement("span");r.className="version-switcher-trigger-chevron",r.setAttribute("aria-hidden","true"),r.textContent="\u25BE",this.#i.append(s,r),this.#t.length===0?(this.#i.disabled=!0,this.#i.setAttribute("title",e?"Loading versions\u2026":"No versions available")):(this.#i.disabled=!1,this.#i.removeAttribute("title"))}#d(){if(this.#n){if(this.#n.replaceChildren(),this.#t.length===0){let t=document.createElement("li");t.className="version-switcher-empty",t.textContent="No versions available.",this.#n.appendChild(t);return}for(let t of this.#t)this.#n.appendChild(this.#E(t))}}#E(t){let e=document.createElement("li");e.setAttribute("role","listitem"),e.dataset.versionId=t.id,t.id===this.#e&&(e.dataset.current="true"),t.archived&&(e.dataset.archived=""),t.draft&&(e.dataset.draft="");let i=document.createElement("button");i.type="button",i.className="version-switcher-entry",i.setAttribute("aria-current",t.id===this.#e?"true":"false");let s=document.createElement("span");if(s.className="version-switcher-entry-label",s.textContent=t.label||t.id,t.archived){let n=document.createElement("span");n.className="version-switcher-badge version-switcher-badge-archived",n.textContent="archived",s.appendChild(n)}if(t.draft){let n=document.createElement("span");n.className="version-switcher-badge version-switcher-badge-draft",n.textContent="draft",s.appendChild(n)}if(t.id===this.#e){let n=document.createElement("span");n.className="version-switcher-badge version-switcher-badge-current",n.textContent="current",s.appendChild(n)}if(i.appendChild(s),t.date){let n=document.createElement("time");n.className="version-switcher-entry-date",n.setAttribute("datetime",t.date);try{n.title=new Date(t.date).toLocaleString()}catch{}n.textContent=C(t.date)||t.date,i.appendChild(n)}if(t.author){let n=document.createElement("span");n.className="version-switcher-entry-author",n.textContent=`by ${t.author}`,i.appendChild(n)}if(t.summary){let n=document.createElement("span");n.className="version-switcher-entry-summary",n.textContent=t.summary,i.appendChild(n)}if(t.versionUrl){let n=document.createElement("a");n.className="version-switcher-entry-changelog",n.href=t.versionUrl,n.textContent="Changelog \u2192",this.listen(n,"click",a=>a.stopPropagation()),i.appendChild(n)}let r=[t.label||t.id];return t.date&&r.push(`released ${C(t.date)||t.date}`),t.archived&&r.push("archived"),t.draft&&r.push("draft"),t.id===this.#e&&r.push("current"),i.setAttribute("aria-label",r.join(", ")),this.listen(i,"click",()=>this.#k(t)),e.appendChild(i),e}#S=t=>{let e=[...this.#n.querySelectorAll("button.version-switcher-entry")],i=e.indexOf(document.activeElement);if(i===-1)return;let s=i;switch(t.key){case"ArrowDown":t.preventDefault(),s=Math.min(e.length-1,i+1);break;case"ArrowUp":t.preventDefault(),s=Math.max(0,i-1);break;case"Home":t.preventDefault(),s=0;break;case"End":t.preventDefault(),s=e.length-1;break;default:return}e[s]?.focus()};#k(t){this.dispatchEvent(new CustomEvent("version-switcher:select",{bubbles:!0,detail:{entry:t}})),this.#C(t)}#C(t){let e=this.getAttribute("data-action")||"navigate";if(e==="navigate")return this.#A(t);if(e==="swap")return this.#M(t);if(e==="diff")return this.#q(t);this.#r(`Unknown action "${e}"; falling back to navigate.`),this.#A(t)}#A(t){if(!t?.url){this.#r("Cannot navigate: entry has no url.",{entry:t});return}let e=new CustomEvent("version-switcher:before-navigate",{bubbles:!0,cancelable:!0,detail:{entry:t}});this.dispatchEvent(e)&&(this.closePicker(),location.href=t.url)}#u(){return this.getAttribute("data-versioned-region")||"[data-versioned], main"}#m(t){return t.querySelector(this.#u())}async#y(t){let e=await fetch(t,{credentials:"same-origin"});if(!e.ok)throw new Error(`Fetch failed (${e.status}) for ${t}`);let i=await e.text(),s=new DOMParser().parseFromString(i,"text/html"),r=this.#m(s);if(!r)throw new Error(`No versioned region (${this.#u()}) found in ${t}`);return r}async#M(t){if(!t?.url){this.#r("Cannot swap: entry has no url.",{entry:t});return}let e=this.#m(document);if(!e){this.#r(`No versioned region (${this.#u()}) on this page to swap.`,{entry:t});return}let i=new CustomEvent("version-switcher:before-swap",{bubbles:!0,cancelable:!0,detail:{entry:t}});if(!this.dispatchEvent(i))return;this.closePicker();let s=this.#e,r=async()=>{try{let a=await this.#y(t.url);e.replaceChildren(...a.childNodes)}catch(a){throw this.#r(a.message,{entry:t,error:a}),a}};try{"startViewTransition"in document?await document.startViewTransition(r).updateCallbackDone:await r()}catch{return}let n=document.querySelector('meta[itemprop="version"]');n||(n=document.createElement("meta"),n.setAttribute("itemprop","version"),document.head.appendChild(n)),n.setAttribute("content",t.id),this.#e=t.id,this.#c(),this.#d(),this.dispatchEvent(new CustomEvent("version-switcher:swap",{bubbles:!0,detail:{entry:t,previousId:s}}))}async#q(t){if(!t?.url){this.#r("Cannot diff: entry has no url.",{entry:t});return}let e=this.#m(document);if(!e){this.#r(`No versioned region (${this.#u()}) on this page to diff against.`,{entry:t});return}if(t.id===this.#e){this.#r("Cannot diff against the current version.",{entry:t});return}let i=new CustomEvent("version-switcher:before-diff",{bubbles:!0,cancelable:!0,detail:{entry:t}});if(!this.dispatchEvent(i))return;this.closePicker();let s;try{s=await this.#y(t.url)}catch(c){this.#r(c.message,{entry:t,error:c});return}document.querySelectorAll(".version-switcher-diff-host").forEach(c=>c.remove());let r=w(e.textContent.trim(),s.textContent.trim()),n=document.createElement("change-set");n.classList.add("version-switcher-diff-host"),n.dataset.versionFrom=this.#e??"",n.dataset.versionTo=t.id,n.appendChild(E(r)),(this.getAttribute("data-diff-position")||"before")==="after"?e.parentNode.insertBefore(n,e.nextSibling):e.parentNode.insertBefore(n,e),n.setAttribute("tabindex","-1"),n.focus({preventScroll:!1}),this.dispatchEvent(new CustomEvent("version-switcher:diff",{bubbles:!0,detail:{entry:t,previousId:this.#e,diffElement:n,opCount:r.length}}))}get versions(){return this.#t.slice()}get currentId(){return this.#e}openPicker(){this.#s?.show()}closePicker(){this.#s?.hide()}switchTo(t){let e=this.#t.find(i=>i.id===t);if(!e){this.#r(`switchTo: no entry with id "${t}"`);return}this.dispatchEvent(new CustomEvent("version-switcher:select",{bubbles:!0,detail:{entry:e}})),this.#C(e)}refresh(){this.#l(),!(!this.#i||!this.#n)&&(this.#c(),this.#d(),this.#p(),this.#a&&this.#f())}#r(t,e={}){this.dispatchEvent(new CustomEvent("version-switcher:error",{bubbles:!0,detail:{message:t,...e}}))}};function C(h){let t=new Date(h);if(isNaN(t.getTime()))return null;let e=(Date.now()-t.getTime())/1e3;if(e<0)return null;let i=60,s=3600,r=86400,n=2592e3,a=31536e3;if(e<i)return"just now";if(e<s){let o=Math.floor(e/i);return`${o} minute${o!==1?"s":""} ago`}if(e<r){let o=Math.floor(e/s);return`${o} hour${o!==1?"s":""} ago`}if(e<n){let o=Math.floor(e/r);return`${o} day${o!==1?"s":""} ago`}if(e<a){let o=Math.floor(e/n);return`${o} month${o!==1?"s":""} ago`}let c=Math.floor(e/a);return`${c} year${c!==1?"s":""} ago`}p("version-switcher",v);export{v as VersionSwitcher};
+//# sourceMappingURL=version-switcher.js.map

package/dist/cdn/components/video-player.js

@@ -1,5 +1,5 @@
-var v=window.matchMedia("(prefers-reduced-motion: reduce)");var d=new Map;function u(o,t,e={}){let s=e.priority??10,r={impl:t,bundle:e.bundle,contract:e.contract,priority:s},i=d.get(o);if(customElements.get(o)){if(!i||i.priority>=s){i&&i.priority===s&&i.impl!==t&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${i.bundle}" (priority ${i.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${o}> defined by "${i.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(i&&i.priority>=s){i.priority===s&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${i.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}d.set(o,r),customElements.define(o,t)}var l=class extends HTMLElement{#t=[];connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&this.setAttribute("data-upgraded","")}disconnectedCallback(){for(let t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,s,r){t.addEventListener(e,s,r),this.#t.push(()=>t.removeEventListener(e,s,r))}setup(){}teardown(){}};var h=[.5,.75,1,1.25,1.5,2],p=3e3,c=class extends l{#t=null;#a=null;#s=!1;#p=null;#l=null;#y=null;#c=null;#g=null;#k=null;#e=null;#x=null;#w=null;#d=null;#n=null;#v=null;#_=null;#f=null;#i=null;#m=2;#E=null;#S=null;setup(){if(this.#t=this.querySelector("video"),!this.#t)return!1;this.#a=this.querySelector(".track-list"),this.#t.removeAttribute("controls");let t=!this.shadowRoot;this.#M(),t&&(this.#C(),this.#L(),this.#$(),this.#q()),this.hasAttribute("muted")&&(this.#t.muted=!0,this.setAttribute("muted","")),this.hasAttribute("autoplay")&&this.#t.play().catch(()=>{}),this.#r(),this.#E=()=>{let e=this.shadowRoot?.querySelector(".player");e&&(e.style.display="none",e.offsetHeight,e.style.display="")},this.listen(window,"vb:theme-change",this.#E),this.#S=()=>{let e=!!document.fullscreenElement;this.toggleAttribute("data-fullscreen",e),this.#v.setAttribute("aria-label",e?"Exit fullscreen":"Fullscreen"),this.#o("video-player:fullscreen",{active:e})},this.listen(document,"fullscreenchange",this.#S),this.setAttribute("state","idle")}teardown(){this.#t&&this.#t.setAttribute("controls",""),this.#i!=null&&clearTimeout(this.#i)}#M(){if(this.shadowRoot)return;let t=this.attachShadow({mode:"open"});t.innerHTML=`
-      <style>${this.#z()}</style>
+var v=window.matchMedia("(prefers-reduced-motion: reduce)");var u=new Map;function d(n,t,e={}){let s=e.priority??10,r={impl:t,bundle:e.bundle,contract:e.contract,priority:s},i=u.get(n);if(customElements.get(n)){if(!i||i.priority>=s){i&&i.priority===s&&i.impl!==t&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${i.bundle}" (priority ${i.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${n}> defined by "${i.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(i&&i.priority>=s){i.priority===s&&console.warn(`[VB Bundle] Tag <${n}> already registered by "${i.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}u.set(n,r),customElements.define(n,t)}var l=class extends HTMLElement{#t=[];#e;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,s,r){t.addEventListener(e,s,r),this.#t.push(()=>t.removeEventListener(e,s,r))}setup(){}teardown(){}setState(t,e){this.#e||(this.#e=this.attachInternals());let s=this.#e.states;try{e?s.add(t):s.delete(t)}catch{let r=`--${t}`;e?s.add(r):s.delete(r)}}_adoptInternals(t){this.#e||(this.#e=t)}};var h=[.5,.75,1,1.25,1.5,2],p=3e3,c=class extends l{#t=null;#e=null;#a=!1;#p=null;#l=null;#y=null;#c=null;#g=null;#k=null;#i=null;#x=null;#w=null;#u=null;#o=null;#v=null;#_=null;#f=null;#r=null;#m=2;#E=null;#S=null;setup(){if(this.#t=this.querySelector("video"),!this.#t)return!1;this.#e=this.querySelector(".track-list"),this.#t.removeAttribute("controls");let t=!this.shadowRoot;return this.#C(),t&&(this.#z(),this.#L(),this.#$(),this.#q()),this.hasAttribute("muted")&&(this.#t.muted=!0,this.setAttribute("muted","")),this.hasAttribute("autoplay")&&this.#t.play().catch(()=>{}),this.#s(),this.#E=()=>{let e=this.shadowRoot?.querySelector(".player");e&&(e.style.display="none",e.offsetHeight,e.style.display="")},this.listen(window,"vb:theme-change",this.#E),this.#S=()=>{let e=!!document.fullscreenElement;this.toggleAttribute("data-fullscreen",e),this.#v.setAttribute("aria-label",e?"Exit fullscreen":"Fullscreen"),this.#n("video-player:fullscreen",{active:e})},this.listen(document,"fullscreenchange",this.#S),this.setAttribute("state","idle"),!0}teardown(){this.#t&&this.#t.setAttribute("controls",""),this.#r!=null&&clearTimeout(this.#r)}get src(){return this.#t?.getAttribute("src")||this.#t?.currentSrc||""}set src(t){if(!this.#t)return;let e=t==null?"":String(t);this.#t.getAttribute("src")!==e&&(this.#t.setAttribute("src",e),this.#t.load?.(),this.dispatchEvent(new CustomEvent("video-player:src-changed",{detail:{src:e,source:"property"},bubbles:!0})))}get currentTime(){return this.#t?.currentTime??0}set currentTime(t){this.#t&&(this.#t.currentTime=Number(t)||0)}#C(){if(this.shadowRoot)return;let t=this.attachShadow({mode:"open"});t.innerHTML=`
+      <style>${this.#M()}</style>
       <div part="player" class="player">
         <slot></slot>
         <button part="play-overlay" class="play-overlay" type="button" aria-label="Play video">
@@ -82,7 +82,7 @@ var v=window.matchMedia("(prefers-reduced-motion: reduce)");var d=new Map;functi
         </div>
         <div class="sr-status" role="status" aria-live="polite"></div>
       </div>
-    `,this.#p=t.querySelector(".controls"),this.#l=t.querySelector(".play-btn"),this.#y=t.querySelector(".play-overlay"),this.#c=t.querySelector(".timeline"),this.#g=t.querySelector(".timeline-fill"),this.#k=t.querySelector(".timeline-buffer"),this.#e=t.querySelector(".volume"),this.#x=t.querySelector(".current-time"),this.#w=t.querySelector(".duration"),this.#d=t.querySelector(".speed-btn"),this.#n=t.querySelector(".captions-btn"),this.#v=t.querySelector(".fullscreen-btn"),this.#_=t.querySelector(".buffer-indicator"),this.#f=t.querySelector(".sr-status"),this.#t.querySelector('track[kind="captions"], track[kind="subtitles"]')||(this.#n.hidden=!0)}#z(){return`
+    `,this.#p=t.querySelector(".controls"),this.#l=t.querySelector(".play-btn"),this.#y=t.querySelector(".play-overlay"),this.#c=t.querySelector(".timeline"),this.#g=t.querySelector(".timeline-fill"),this.#k=t.querySelector(".timeline-buffer"),this.#i=t.querySelector(".volume"),this.#x=t.querySelector(".current-time"),this.#w=t.querySelector(".duration"),this.#u=t.querySelector(".speed-btn"),this.#o=t.querySelector(".captions-btn"),this.#v=t.querySelector(".fullscreen-btn"),this.#_=t.querySelector(".buffer-indicator"),this.#f=t.querySelector(".sr-status"),this.#t.querySelector('track[kind="captions"], track[kind="subtitles"]')||(this.#o.hidden=!0)}#M(){return`
       :host {
         display: block;
         --_accent: var(--video-player-accent, var(--color-primary, oklch(55% 0.2 260)));
@@ -508,5 +508,5 @@ var v=window.matchMedia("(prefers-reduced-motion: reduce)");var d=new Map;functi
           cursor: auto;
         }
       }
-    `}#C(){this.#t.addEventListener("timeupdate",()=>this.#F()),this.#t.addEventListener("loadedmetadata",()=>this.#P()),this.#t.addEventListener("progress",()=>this.#H()),this.#t.addEventListener("play",()=>{this.#s=!0,this.setAttribute("state","playing"),this.#l.setAttribute("aria-label","Pause"),this.#h("Playing"),this.#o("video-player:play",{currentTime:this.#t.currentTime,src:this.#t.currentSrc})}),this.#t.addEventListener("pause",()=>{this.#s=!1,this.setAttribute("state","paused"),this.#l.setAttribute("aria-label","Play"),this.#r(),this.#h("Paused"),this.#o("video-player:pause",{currentTime:this.#t.currentTime})}),this.#t.addEventListener("ended",()=>{this.#s=!1,this.setAttribute("state","ended"),this.#l.setAttribute("aria-label","Play"),this.#r();let t=this.#a?.querySelector("li[data-video-active]");t&&t.setAttribute("data-video-played",""),this.#a&&this.#V(),this.#h("Ended"),this.#o("video-player:ended",{src:this.#t.currentSrc})}),this.#t.addEventListener("waiting",()=>{this.#s&&(this.setAttribute("state","buffering"),this.#h("Buffering"))}),this.#t.addEventListener("playing",()=>{this.getAttribute("state")==="buffering"&&this.setAttribute("state","playing")})}#L(){this.#y.addEventListener("click",i=>{i.stopPropagation(),this.#t.play().catch(()=>{})}),(this.shadowRoot?.querySelector(".player")).addEventListener("click",i=>{i.target.closest(".controls")||i.target.closest(".play-overlay")||(this.#s?this.#t.pause():this.#t.play().catch(()=>{}))}),this.#l.addEventListener("click",()=>{this.#s?this.#t.pause():this.#t.play().catch(()=>{})}),this.#c.addEventListener("input",()=>{this.#t.duration&&(this.#t.currentTime=Number(this.#c.value)/100*this.#t.duration)}),(this.shadowRoot?.querySelector(".skip-back-btn")).addEventListener("click",()=>{this.#t.currentTime=Math.max(0,this.#t.currentTime-10)}),(this.shadowRoot?.querySelector(".skip-forward-btn")).addEventListener("click",()=>{this.#t.currentTime=Math.min(this.#t.duration||0,this.#t.currentTime+10)}),this.#e.addEventListener("input",()=>{this.#t.volume=Number(this.#e.value),this.#t.muted=!1,this.removeAttribute("muted"),this.#e.style.setProperty("--_vol",this.#e.value)}),(this.shadowRoot?.querySelector(".mute-btn")).addEventListener("click",()=>{this.#t.muted=!this.#t.muted,this.toggleAttribute("muted",this.#t.muted),this.#e.style.setProperty("--_vol",this.#t.muted?"0":this.#e.value)}),this.#d.addEventListener("click",()=>{this.#m=(this.#m+1)%h.length;let i=h[this.#m];this.#t.playbackRate=i;let a=this.#d.querySelector("span");a.textContent=`${i}x`,this.#d.setAttribute("aria-label",`Playback speed ${i}x`),this.#o("video-player:speed",{rate:i})}),this.#n.addEventListener("click",()=>{let i=this.#N();if(!i)return;let a=i.mode==="showing";i.mode=a?"hidden":"showing";let n=!a;this.toggleAttribute("captions",n),this.#n.setAttribute("aria-pressed",String(n)),this.#o("video-player:captions",{active:n,label:i.label})}),this.#v.addEventListener("click",()=>this.#A()),this.addEventListener("keydown",i=>this.#R(i)),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")}#q(){let t=this.shadowRoot?.querySelector(".player"),e=()=>{this.#r(),this.#i!=null&&clearTimeout(this.#i),this.#s&&(this.#i=setTimeout(()=>this.#b(),p))};t.addEventListener("mousemove",e),t.addEventListener("mouseenter",e),t.addEventListener("mouseleave",()=>{this.#s&&(this.#i!=null&&clearTimeout(this.#i),this.#i=setTimeout(()=>this.#b(),500))}),t.addEventListener("touchstart",()=>{this.hasAttribute("controls")?this.#b():e()},{passive:!0}),this.#p.addEventListener("mouseenter",()=>{this.#i!=null&&clearTimeout(this.#i),this.#r()}),this.#p.addEventListener("focusin",()=>{this.#i!=null&&clearTimeout(this.#i),this.#r()})}#r(){this.setAttribute("controls","")}#b(){this.removeAttribute("controls")}#$(){this.#a&&this.#a.addEventListener("click",t=>{let e=t.target.closest("a[href]");e&&(t.preventDefault(),this.#u(e.href,e.closest("li"),e))})}#u(t,e,s){this.#a.querySelectorAll("li").forEach(n=>n.removeAttribute("data-video-active")),e&&e.setAttribute("data-video-active",""),this.#t.src=t;let i=s?.getAttribute("data-poster");i&&(this.#t.poster=i);let a=s?.getAttribute("data-captions");this.#B(a),this.#t.play().catch(()=>{}),this.#o("video-player:track-change",{src:t,title:s?.textContent??""})}#B(t){if(this.#t.querySelectorAll("track[data-dynamic]").forEach(r=>r.remove()),t){let r=document.createElement("track");r.kind="captions",r.src=t,r.default=!0,r.setAttribute("data-dynamic",""),this.#t.appendChild(r),this.hasAttribute("captions")&&(r.track.mode="showing")}let s=this.#t.querySelector('track[kind="captions"], track[kind="subtitles"]');this.#n.hidden=!s}#V(){if(!this.#a)return;let t=[...this.#a.querySelectorAll("li")],e=t.findIndex(r=>r.hasAttribute("data-video-active"));if(this.hasAttribute("shuffle")){let r=t.filter((i,a)=>a!==e);if(r.length){let i=r[Math.floor(Math.random()*r.length)],a=i.querySelector("a[href]");a&&this.#u(a.href,i,a)}return}let s=e+1;if(s<t.length){let r=t[s].querySelector("a[href]");r&&this.#u(r.href,t[s],r)}else if(this.hasAttribute("loop")){let r=t[0]?.querySelector("a[href]");r&&this.#u(r.href,t[0],r)}}#F(){let t=this.#t.currentTime,e=this.#t.duration||0,s=e?t/e*100:0;this.#x.textContent=this.#T(t),this.#c.value=String(s),this.#c.setAttribute("aria-valuetext",this.#D(t)),this.#g.style.width=`${s}%`}#P(){let t=this.#t.duration||0;this.#w.textContent=this.#T(t)}#H(){let t=this.#t.buffered,e=this.#t.duration||0;if(t.length>0&&e){let s=t.end(t.length-1);this.#k.style.width=`${s/e*100}%`}}#A(){document.fullscreenElement?document.exitFullscreen():this.requestFullscreen().catch(()=>{this.#t.requestFullscreen?.().catch(()=>{})})}#N(){let t=this.#t.textTracks;for(let e=0;e<t.length;e++)if(t[e].kind==="captions"||t[e].kind==="subtitles")return t[e];return null}#R(t){if(!(t.target.tagName==="INPUT"||t.target.tagName==="TEXTAREA"))switch(t.key){case" ":case"k":case"K":t.preventDefault(),this.#s?this.#t.pause():this.#t.play().catch(()=>{});break;case"ArrowLeft":t.preventDefault(),this.#t.currentTime=Math.max(0,this.#t.currentTime-10),this.#r();break;case"ArrowRight":t.preventDefault(),this.#t.currentTime=Math.min(this.#t.duration||0,this.#t.currentTime+10),this.#r();break;case"ArrowUp":t.preventDefault(),this.#t.volume=Math.min(1,this.#t.volume+.05),this.#e.value=String(this.#t.volume),this.#e.style.setProperty("--_vol",String(this.#t.volume)),this.#r();break;case"ArrowDown":t.preventDefault(),this.#t.volume=Math.max(0,this.#t.volume-.05),this.#e.value=String(this.#t.volume),this.#e.style.setProperty("--_vol",String(this.#t.volume)),this.#r();break;case"m":case"M":this.#t.muted=!this.#t.muted,this.toggleAttribute("muted",this.#t.muted),this.#e.style.setProperty("--_vol",this.#t.muted?"0":this.#e.value);break;case"f":case"F":this.#A();break;case"c":case"C":this.#n.click();break;case"Escape":document.fullscreenElement&&document.exitFullscreen();break}}#T(t){if(!Number.isFinite(t))return"0:00";let e=Math.floor(t/3600),s=Math.floor(t%3600/60),r=Math.floor(t%60);return e>0?`${e}:${String(s).padStart(2,"0")}:${String(r).padStart(2,"0")}`:`${s}:${String(r).padStart(2,"0")}`}#D(t){if(!Number.isFinite(t))return"0 seconds";let e=Math.floor(t/3600),s=Math.floor(t%3600/60),r=Math.floor(t%60),i=[];return e>0&&i.push(`${e} hour${e!==1?"s":""}`),s>0&&i.push(`${s} minute${s!==1?"s":""}`),i.push(`${r} second${r!==1?"s":""}`),i.join(" ")}#h(t){this.#f&&(this.#f.textContent=t)}#o(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e}))}};u("video-player",c);export{c as VideoPlayerElement};
+    `}#z(){this.#t.addEventListener("timeupdate",()=>this.#F()),this.#t.addEventListener("loadedmetadata",()=>this.#P()),this.#t.addEventListener("progress",()=>this.#H()),this.#t.addEventListener("play",()=>{this.#a=!0,this.setAttribute("state","playing"),this.#l.setAttribute("aria-label","Pause"),this.#h("Playing"),this.#n("video-player:play",{currentTime:this.#t.currentTime,src:this.#t.currentSrc})}),this.#t.addEventListener("pause",()=>{this.#a=!1,this.setAttribute("state","paused"),this.#l.setAttribute("aria-label","Play"),this.#s(),this.#h("Paused"),this.#n("video-player:pause",{currentTime:this.#t.currentTime})}),this.#t.addEventListener("ended",()=>{this.#a=!1,this.setAttribute("state","ended"),this.#l.setAttribute("aria-label","Play"),this.#s();let t=this.#e?.querySelector("li[data-video-active]");t&&t.setAttribute("data-video-played",""),this.#e&&this.#V(),this.#h("Ended"),this.#n("video-player:ended",{src:this.#t.currentSrc})}),this.#t.addEventListener("waiting",()=>{this.#a&&(this.setAttribute("state","buffering"),this.#h("Buffering"))}),this.#t.addEventListener("playing",()=>{this.getAttribute("state")==="buffering"&&this.setAttribute("state","playing")})}#L(){this.#y.addEventListener("click",i=>{i.stopPropagation(),this.#t.play().catch(()=>{})}),(this.shadowRoot?.querySelector(".player")).addEventListener("click",i=>{i.target.closest(".controls")||i.target.closest(".play-overlay")||(this.#a?this.#t.pause():this.#t.play().catch(()=>{}))}),this.#l.addEventListener("click",()=>{this.#a?this.#t.pause():this.#t.play().catch(()=>{})}),this.#c.addEventListener("input",()=>{this.#t.duration&&(this.#t.currentTime=Number(this.#c.value)/100*this.#t.duration)}),(this.shadowRoot?.querySelector(".skip-back-btn")).addEventListener("click",()=>{this.#t.currentTime=Math.max(0,this.#t.currentTime-10)}),(this.shadowRoot?.querySelector(".skip-forward-btn")).addEventListener("click",()=>{this.#t.currentTime=Math.min(this.#t.duration||0,this.#t.currentTime+10)}),this.#i.addEventListener("input",()=>{this.#t.volume=Number(this.#i.value),this.#t.muted=!1,this.removeAttribute("muted"),this.#i.style.setProperty("--_vol",this.#i.value)}),(this.shadowRoot?.querySelector(".mute-btn")).addEventListener("click",()=>{this.#t.muted=!this.#t.muted,this.toggleAttribute("muted",this.#t.muted),this.#i.style.setProperty("--_vol",this.#t.muted?"0":this.#i.value)}),this.#u.addEventListener("click",()=>{this.#m=(this.#m+1)%h.length;let i=h[this.#m];this.#t.playbackRate=i;let a=this.#u.querySelector("span");a.textContent=`${i}x`,this.#u.setAttribute("aria-label",`Playback speed ${i}x`),this.#n("video-player:speed",{rate:i})}),this.#o.addEventListener("click",()=>{let i=this.#N();if(!i)return;let a=i.mode==="showing";i.mode=a?"hidden":"showing";let o=!a;this.toggleAttribute("captions",o),this.#o.setAttribute("aria-pressed",String(o)),this.#n("video-player:captions",{active:o,label:i.label})}),this.#v.addEventListener("click",()=>this.#A()),this.addEventListener("keydown",i=>this.#R(i)),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")}#q(){let t=this.shadowRoot?.querySelector(".player"),e=()=>{this.#s(),this.#r!=null&&clearTimeout(this.#r),this.#a&&(this.#r=setTimeout(()=>this.#b(),p))};t.addEventListener("mousemove",e),t.addEventListener("mouseenter",e),t.addEventListener("mouseleave",()=>{this.#a&&(this.#r!=null&&clearTimeout(this.#r),this.#r=setTimeout(()=>this.#b(),500))}),t.addEventListener("touchstart",()=>{this.hasAttribute("controls")?this.#b():e()},{passive:!0}),this.#p.addEventListener("mouseenter",()=>{this.#r!=null&&clearTimeout(this.#r),this.#s()}),this.#p.addEventListener("focusin",()=>{this.#r!=null&&clearTimeout(this.#r),this.#s()})}#s(){this.setAttribute("controls","")}#b(){this.removeAttribute("controls")}#$(){this.#e&&this.#e.addEventListener("click",t=>{let e=t.target.closest("a[href]");e&&(t.preventDefault(),this.#d(e.href,e.closest("li"),e))})}#d(t,e,s){this.#e.querySelectorAll("li").forEach(o=>o.removeAttribute("data-video-active")),e&&e.setAttribute("data-video-active",""),this.#t.src=t;let i=s?.getAttribute("data-poster");i&&(this.#t.poster=i);let a=s?.getAttribute("data-captions");this.#B(a),this.#t.play().catch(()=>{}),this.#n("video-player:track-change",{src:t,title:s?.textContent??""})}#B(t){if(this.#t.querySelectorAll("track[data-dynamic]").forEach(r=>r.remove()),t){let r=document.createElement("track");r.kind="captions",r.src=t,r.default=!0,r.setAttribute("data-dynamic",""),this.#t.appendChild(r),this.hasAttribute("captions")&&(r.track.mode="showing")}let s=this.#t.querySelector('track[kind="captions"], track[kind="subtitles"]');this.#o.hidden=!s}#V(){if(!this.#e)return;let t=[...this.#e.querySelectorAll("li")],e=t.findIndex(r=>r.hasAttribute("data-video-active"));if(this.hasAttribute("shuffle")){let r=t.filter((i,a)=>a!==e);if(r.length){let i=r[Math.floor(Math.random()*r.length)],a=i.querySelector("a[href]");a&&this.#d(a.href,i,a)}return}let s=e+1;if(s<t.length){let r=t[s].querySelector("a[href]");r&&this.#d(r.href,t[s],r)}else if(this.hasAttribute("loop")){let r=t[0]?.querySelector("a[href]");r&&this.#d(r.href,t[0],r)}}#F(){let t=this.#t.currentTime,e=this.#t.duration||0,s=e?t/e*100:0;this.#x.textContent=this.#T(t),this.#c.value=String(s),this.#c.setAttribute("aria-valuetext",this.#D(t)),this.#g.style.width=`${s}%`}#P(){let t=this.#t.duration||0;this.#w.textContent=this.#T(t)}#H(){let t=this.#t.buffered,e=this.#t.duration||0;if(t.length>0&&e){let s=t.end(t.length-1);this.#k.style.width=`${s/e*100}%`}}#A(){document.fullscreenElement?document.exitFullscreen():this.requestFullscreen().catch(()=>{this.#t.requestFullscreen?.().catch(()=>{})})}#N(){let t=this.#t.textTracks;for(let e=0;e<t.length;e++)if(t[e].kind==="captions"||t[e].kind==="subtitles")return t[e];return null}#R(t){if(!(t.target.tagName==="INPUT"||t.target.tagName==="TEXTAREA"))switch(t.key){case" ":case"k":case"K":t.preventDefault(),this.#a?this.#t.pause():this.#t.play().catch(()=>{});break;case"ArrowLeft":t.preventDefault(),this.#t.currentTime=Math.max(0,this.#t.currentTime-10),this.#s();break;case"ArrowRight":t.preventDefault(),this.#t.currentTime=Math.min(this.#t.duration||0,this.#t.currentTime+10),this.#s();break;case"ArrowUp":t.preventDefault(),this.#t.volume=Math.min(1,this.#t.volume+.05),this.#i.value=String(this.#t.volume),this.#i.style.setProperty("--_vol",String(this.#t.volume)),this.#s();break;case"ArrowDown":t.preventDefault(),this.#t.volume=Math.max(0,this.#t.volume-.05),this.#i.value=String(this.#t.volume),this.#i.style.setProperty("--_vol",String(this.#t.volume)),this.#s();break;case"m":case"M":this.#t.muted=!this.#t.muted,this.toggleAttribute("muted",this.#t.muted),this.#i.style.setProperty("--_vol",this.#t.muted?"0":this.#i.value);break;case"f":case"F":this.#A();break;case"c":case"C":this.#o.click();break;case"Escape":document.fullscreenElement&&document.exitFullscreen();break}}#T(t){if(!Number.isFinite(t))return"0:00";let e=Math.floor(t/3600),s=Math.floor(t%3600/60),r=Math.floor(t%60);return e>0?`${e}:${String(s).padStart(2,"0")}:${String(r).padStart(2,"0")}`:`${s}:${String(r).padStart(2,"0")}`}#D(t){if(!Number.isFinite(t))return"0 seconds";let e=Math.floor(t/3600),s=Math.floor(t%3600/60),r=Math.floor(t%60),i=[];return e>0&&i.push(`${e} hour${e!==1?"s":""}`),s>0&&i.push(`${s} minute${s!==1?"s":""}`),i.push(`${r} second${r!==1?"s":""}`),i.join(" ")}#h(t){this.#f&&(this.#f.textContent=t)}#n(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e}))}};d("video-player",c);export{c as VideoPlayerElement};
 //# sourceMappingURL=video-player.js.map