vanilla-breeze 0.2.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +11251 -18739
- package/dist/cdn/components/icon-wc.js +2 -2
- package/dist/cdn/components/manifest.json +2 -146
- package/dist/cdn/components/settings-panel.js +3 -3
- package/dist/cdn/components/theme-picker.js +12 -12
- package/dist/cdn/packs/journal.effects.css +2 -0
- package/dist/cdn/packs/journal.full.css +2 -0
- package/dist/cdn/packs/manifest.json +11 -21
- package/dist/cdn/packs/ui.full.js +4 -4
- package/dist/cdn/themes/8bit.tokens.json +1 -1
- package/dist/cdn/themes/alpha1999-dark.tokens.json +1 -1
- package/dist/cdn/themes/alpha1999.tokens.json +1 -1
- package/dist/cdn/themes/anthropic.tokens.json +1 -1
- package/dist/cdn/themes/art-deco-dark.tokens.json +1 -1
- package/dist/cdn/themes/art-deco.tokens.json +1 -1
- package/dist/cdn/themes/bauhaus-dark.tokens.json +1 -1
- package/dist/cdn/themes/bauhaus.tokens.json +1 -1
- package/dist/cdn/themes/brutalist-dark.tokens.json +1 -1
- package/dist/cdn/themes/brutalist.tokens.json +1 -1
- package/dist/cdn/themes/catppuccin-frappe.tokens.json +1 -1
- package/dist/cdn/themes/catppuccin-latte-dark.tokens.json +1 -1
- package/dist/cdn/themes/catppuccin-latte.tokens.json +1 -1
- package/dist/cdn/themes/catppuccin-macchiato.tokens.json +1 -1
- package/dist/cdn/themes/catppuccin-mocha.tokens.json +1 -1
- package/dist/cdn/themes/classic-dark.tokens.json +1 -1
- package/dist/cdn/themes/classic.tokens.json +1 -1
- package/dist/cdn/themes/claymorphism-dark.tokens.json +1 -1
- package/dist/cdn/themes/claymorphism.tokens.json +1 -1
- package/dist/cdn/themes/clinical-dark.tokens.json +1 -1
- package/dist/cdn/themes/clinical.tokens.json +1 -1
- package/dist/cdn/themes/cottagecore-dark.tokens.json +1 -1
- package/dist/cdn/themes/cottagecore.tokens.json +1 -1
- package/dist/cdn/themes/cyber.tokens.json +1 -1
- package/dist/cdn/themes/dawn-dark.tokens.json +1 -1
- package/dist/cdn/themes/dawn.tokens.json +1 -1
- package/dist/cdn/themes/dracula.tokens.json +1 -1
- package/dist/cdn/themes/dusk.tokens.json +1 -1
- package/dist/cdn/themes/editorial-dark.tokens.json +1 -1
- package/dist/cdn/themes/editorial.tokens.json +1 -1
- package/dist/cdn/themes/financial-dark.tokens.json +1 -1
- package/dist/cdn/themes/financial.tokens.json +1 -1
- package/dist/cdn/themes/genai.tokens.json +1 -1
- package/dist/cdn/themes/glassmorphism-dark.tokens.json +1 -1
- package/dist/cdn/themes/glassmorphism.tokens.json +1 -1
- package/dist/cdn/themes/government-dark.tokens.json +1 -1
- package/dist/cdn/themes/government.tokens.json +1 -1
- package/dist/cdn/themes/gruvbox-dark.tokens.json +1 -1
- package/dist/cdn/themes/gruvbox.tokens.json +1 -1
- package/dist/cdn/themes/high-noon-dark.tokens.json +1 -1
- package/dist/cdn/themes/high-noon.tokens.json +1 -1
- package/dist/cdn/themes/ibm.tokens.json +1 -1
- package/dist/cdn/themes/journal-dark.tokens.json +406 -0
- package/dist/cdn/themes/journal.css +2 -0
- package/dist/cdn/themes/journal.tokens.json +583 -0
- package/dist/cdn/themes/kawaii-dark.tokens.json +1 -1
- package/dist/cdn/themes/kawaii.tokens.json +1 -1
- package/dist/cdn/themes/magna-dark.tokens.json +1 -1
- package/dist/cdn/themes/magna.tokens.json +1 -1
- package/dist/cdn/themes/manifest.json +7 -0
- package/dist/cdn/themes/mcdonalds.tokens.json +1 -1
- package/dist/cdn/themes/midnight.tokens.json +1 -1
- package/dist/cdn/themes/minimal-dark.tokens.json +1 -1
- package/dist/cdn/themes/minimal.tokens.json +1 -1
- package/dist/cdn/themes/modern-dark.tokens.json +1 -1
- package/dist/cdn/themes/modern.tokens.json +1 -1
- package/dist/cdn/themes/nes-dark.tokens.json +1 -1
- package/dist/cdn/themes/nes.tokens.json +1 -1
- package/dist/cdn/themes/neumorphism-dark.tokens.json +1 -1
- package/dist/cdn/themes/neumorphism.tokens.json +1 -1
- package/dist/cdn/themes/nord-dark.tokens.json +1 -1
- package/dist/cdn/themes/nord.tokens.json +1 -1
- package/dist/cdn/themes/organic-dark.tokens.json +1 -1
- package/dist/cdn/themes/organic.tokens.json +1 -1
- package/dist/cdn/themes/rose-pine-dark.tokens.json +1 -1
- package/dist/cdn/themes/rose-pine.tokens.json +1 -1
- package/dist/cdn/themes/rough-dark.tokens.json +1 -1
- package/dist/cdn/themes/rough.tokens.json +1 -1
- package/dist/cdn/themes/solarized-dark.tokens.json +1 -1
- package/dist/cdn/themes/solarized.tokens.json +1 -1
- package/dist/cdn/themes/starbucks.tokens.json +1 -1
- package/dist/cdn/themes/startup-dark.tokens.json +1 -1
- package/dist/cdn/themes/startup.tokens.json +1 -1
- package/dist/cdn/themes/super2026-dark.tokens.json +1 -1
- package/dist/cdn/themes/super2026.tokens.json +1 -1
- package/dist/cdn/themes/swiss-dark.tokens.json +1 -1
- package/dist/cdn/themes/swiss.tokens.json +1 -1
- package/dist/cdn/themes/terminal.tokens.json +1 -1
- package/dist/cdn/themes/tokyo-night-dark.tokens.json +1 -1
- package/dist/cdn/themes/tokyo-night.tokens.json +1 -1
- package/dist/cdn/themes/vaporwave-dark.tokens.json +1 -1
- package/dist/cdn/themes/vaporwave.tokens.json +1 -1
- package/dist/cdn/themes/win9x-dark.tokens.json +1 -1
- package/dist/cdn/themes/win9x.tokens.json +1 -1
- package/dist/cdn/vanilla-breeze-core.js +17 -17
- package/dist/cdn/vanilla-breeze-extras.js +36 -222
- package/dist/cdn/vanilla-breeze.css +1 -1
- package/dist/cdn/vanilla-breeze.js +232 -2608
- package/package.json +2 -3
- package/dist/cdn/components/accessibility-specimen.js +0 -11
- package/dist/cdn/components/adr-wc.js +0 -403
- package/dist/cdn/components/breakpoint-specimen.js +0 -26
- package/dist/cdn/components/burndown-chart.js +0 -2
- package/dist/cdn/components/capacity-plan.js +0 -25
- package/dist/cdn/components/color-palette.js +0 -16
- package/dist/cdn/components/component-sampler.js +0 -45
- package/dist/cdn/components/empathy-map.js +0 -582
- package/dist/cdn/components/font-pairer.js +0 -108
- package/dist/cdn/components/gantt-chart.js +0 -2
- package/dist/cdn/components/gradient-builder.js +0 -52
- package/dist/cdn/components/impact-effort.js +0 -2
- package/dist/cdn/components/iron-triangle.js +0 -2
- package/dist/cdn/components/kanban-board.js +0 -2
- package/dist/cdn/components/layout-specimen.js +0 -35
- package/dist/cdn/components/motion-specimen.js +0 -21
- package/dist/cdn/components/palette-generator.js +0 -15
- package/dist/cdn/components/product-roadmap.js +0 -3
- package/dist/cdn/components/quadrant-grid.js +0 -3
- package/dist/cdn/components/quality-target.js +0 -12
- package/dist/cdn/components/requirement-card.js +0 -122
- package/dist/cdn/components/review-surface.js +0 -535
- package/dist/cdn/components/risk-register.js +0 -25
- package/dist/cdn/components/semantic-palette.js +0 -30
- package/dist/cdn/components/spacing-specimen.js +0 -6
- package/dist/cdn/components/story-map.js +0 -2
- package/dist/cdn/components/theme-catalog.js +0 -28
- package/dist/cdn/components/theme-export.js +0 -26
- package/dist/cdn/components/theme-import.js +0 -44
- package/dist/cdn/components/token-specimen.js +0 -26
- package/dist/cdn/components/traceability-matrix.js +0 -3
- package/dist/cdn/components/type-specimen.js +0 -19
- package/dist/cdn/components/user-journey.js +0 -366
- package/dist/cdn/components/user-persona.js +0 -402
- package/dist/cdn/components/user-story.js +0 -411
- package/dist/cdn/components/work-item.js +0 -447
- package/dist/cdn/packs/design-system.full.css +0 -2
- package/dist/cdn/packs/design-system.full.js +0 -175
- package/dist/cdn/packs/ux-planning.full.css +0 -2
- package/dist/cdn/packs/ux-planning.full.js +0 -3160
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
var q=class extends HTMLElement{#i=[];#t;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.#i)t();this.#i=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,i,a){t.addEventListener(e,i,a),this.#i.push(()=>t.removeEventListener(e,i,a))}setup(){}teardown(){}setState(t,e){this.#t||(this.#t=this.attachInternals());let i=this.#t.states;try{e?i.add(t):i.delete(t)}catch{let a=`--${t}`;e?i.add(a):i.delete(a)}}_adoptInternals(t){this.#t||(this.#t=t)}};var dt=window.matchMedia("(prefers-reduced-motion: reduce)");var H=new Map;function U(r,t,e={}){let i=e.priority??10,a={impl:t,bundle:e.bundle,contract:e.contract,priority:i},n=H.get(r);if(customElements.get(r)){if(!n||n.priority>=i){n&&n.priority===i&&n.impl!==t&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=i){n.priority===i&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${n.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}H.set(r,a),customElements.define(r,t)}var P=Object.freeze(["performance","accessibility","security","reliability","maintainability","observability","compatibility","scalability","portability","internationalization","privacy"]),I=Object.freeze(["critical","important","acceptable","not-relevant"]),B=Object.freeze({critical:"Critical",important:"Important",acceptable:"Acceptable","not-relevant":"Not relevant"}),Y=Object.freeze({accessibility:3,performance:5,security:5,reliability:4,observability:3,internationalization:4,compatibility:2,portability:3,privacy:4,scalability:5,maintainability:2}),J=Object.freeze({performance:"Performance",accessibility:"Accessibility",security:"Security",reliability:"Reliability",maintainability:"Maintainability",observability:"Observability",compatibility:"Compatibility",scalability:"Scalability",portability:"Portability",internationalization:"Internationalization",privacy:"Privacy"}),pt=Object.freeze({accessibility:"a11y",internationalization:"i18n",maintainability:"maint",observability:"obs",compatibility:"compat",portability:"porta",performance:"perf",reliability:"rely",scalability:"scale",security:"sec",privacy:"priv"}),nt=Object.freeze({critical:1,important:.6,acceptable:.3,"not-relevant":0});function w(r){return J[r]?J[r]:String(r).replace(/[-_]/g," ").replace(/\b\w/g,t=>t.toUpperCase())}function _(r,t={}){let e={};for(let i of r)Object.prototype.hasOwnProperty.call(t,i)&&Number.isFinite(Number(t[i]))?e[i]=Math.max(0,Math.floor(Number(t[i]))):Object.prototype.hasOwnProperty.call(Y,i)?e[i]=Y[i]:e[i]=1;return Object.freeze(e)}function R(r,t){let e=0;for(let[i,a]of Object.entries(r||{}))a==="critical"&&(e+=Number(t?.[i]??0));return e}function K(r){return Object.keys(r||{}).filter(t=>r[t]==="critical")}function X(r){let{vector:t={},rationales:e={},costWeights:i={},capacityPoints:a=1/0,overrunRationale:n="",minRationale:c=10,minOverrunRationale:l=10}=r||{},p=[],m=K(t);for(let h of m){let v=e[h];(typeof v!="string"||v.trim().length<c)&&p.push(`Critical "${h}" needs a rationale of at least ${c} characters.`)}let u=R(t,i);return Number.isFinite(a)&&u>a&&(typeof n!="string"||n.trim().length<l)&&p.push(`Over budget by ${u-a} points (${u}/${a}); overrunRationale of at least ${l} characters required.`),{valid:p.length===0,errors:p,criticalSum:u}}function Z({level:r,rationale:t,minRationale:e=10}){return I.includes(r)?r==="critical"&&(typeof t!="string"||t.trim().length<e)?{ok:!1,reason:"rationale-too-short"}:{ok:!0}:{ok:!1,reason:"pick-level"}}function G({ility:r,level:t,costWeight:e}){let i=w(r),a=t?B[t]||t:"unset",n=Number(e),c=Number.isFinite(n)?`${n} pts`:"? pts";return`${i} \u2014 ${a} \xB7 ${c}`}function Q(r){if(!r||typeof r!="string")return{};try{let t=JSON.parse(r);return t&&typeof t=="object"&&!Array.isArray(t)?t:{}}catch{return{}}}function tt(r){let t=[];for(let e=0;e<r;e++)t.push(-Math.PI/2+2*Math.PI*e/r);return t}function at({ilities:r,vector:t={},radius:e}){let i=tt(r.length);return r.map((a,n)=>{let c=t[a]||null,l=nt[c]??0;return{ility:a,level:c,x:$(Math.cos(i[n])*e*l),y:$(Math.sin(i[n])*e*l)}})}function j({ilities:r,radius:t}){let e=tt(r.length);return r.map((i,a)=>({ility:i,x:$(Math.cos(e[a])*t),y:$(Math.sin(e[a])*t)}))}var d="http://www.w3.org/2000/svg",st=Object.freeze([{ratio:1,label:"Critical",className:"ring-critical"},{ratio:.6,label:"Important",className:"ring-important"},{ratio:.3,label:"Acceptable",className:"ring-acceptable"}]),ot=.22;function et({ilities:r=[],vector:t={},costWeights:e={},capacityPoints:i=0,radius:a=100}={}){let n=document.createElementNS(d,"svg"),c=a+14,l=c+140,p=c+30;n.setAttribute("viewBox",`${-l} ${-p} ${l*2} ${p*2}`),n.setAttribute("role","group"),n.setAttribute("aria-label",`Quality target. ${K(t||{}).length} critical of ${r.length} ilities. Click any axis to edit.`);for(let o of st){let s=document.createElementNS(d,"polygon");s.setAttribute("class",`ring ${o.className}`);let M=j({ilities:r,radius:a*o.ratio});s.setAttribute("points",M.map(A=>`${A.x},${A.y}`).join(" ")),n.append(s)}let m=j({ilities:r,radius:a});for(let o of m){let s=document.createElementNS(d,"line");s.setAttribute("class","spoke"),s.setAttribute("x1","0"),s.setAttribute("y1","0"),s.setAttribute("x2",String(o.x)),s.setAttribute("y2",String(o.y)),n.append(s)}let u=at({ilities:r,vector:t,radius:a}),h=u.filter(o=>Math.hypot(o.x,o.y)>.5);if(h.length>=3){let o=document.createElementNS(d,"polygon");o.setAttribute("class","vector"),o.setAttribute("points",h.map(s=>`${s.x},${s.y}`).join(" ")),n.append(o)}else if(h.length>0)for(let o of h){let s=document.createElementNS(d,"line");s.setAttribute("class","vector-spoke"),s.setAttribute("x1","0"),s.setAttribute("y1","0"),s.setAttribute("x2",String(o.x)),s.setAttribute("y2",String(o.y)),n.append(s)}let v=j({ilities:r,radius:c});for(let o=0;o<r.length;o++){let s=r[o],M=u[o],A=v[o],z=Number(e?.[s]??0),O=t?.[s]??null,b=document.createElementNS(d,"g");b.setAttribute("class","axis"),b.setAttribute("data-ility",s),O&&b.setAttribute("data-level",String(O)),b.setAttribute("tabindex","0"),b.setAttribute("role","button"),b.setAttribute("aria-label",`${G({ility:s,level:O,costWeight:z})}. Activate to edit.`);let S=document.createElementNS(d,"rect");S.setAttribute("class","hit");let F=ct(A),T=100,W=22,it=A.x+(F==="end"?-T:F==="start"?0:-T/2),rt=A.y-W/2;if(S.setAttribute("x",String($(it))),S.setAttribute("y",String($(rt))),S.setAttribute("width",String(T)),S.setAttribute("height",String(W)),S.setAttribute("rx","4"),b.append(S),O){let L=document.createElementNS(d,"circle");L.setAttribute("class","marker"),L.setAttribute("cx",String(M.x)),L.setAttribute("cy",String(M.y)),L.setAttribute("r","4"),b.append(L)}let N=document.createElementNS(d,"text");N.setAttribute("class","axis-label"),N.setAttribute("x",String(A.x)),N.setAttribute("y",String(A.y)),N.setAttribute("text-anchor",F),N.setAttribute("dominant-baseline","middle"),N.textContent=w(s),b.append(N);let D=document.createElementNS(d,"title");D.textContent=G({ility:s,level:O,costWeight:z}),b.append(D),n.append(b)}let f=document.createElementNS(d,"g");f.setAttribute("class","center");let E=R(t,e);Number.isFinite(i)&&E>i&&f.setAttribute("data-over","");let y=a*ot,k=document.createElementNS(d,"circle");k.setAttribute("class","capacity-backdrop"),k.setAttribute("cx","0"),k.setAttribute("cy","0"),k.setAttribute("r",String($(y))),f.append(k);let g=document.createElementNS(d,"text");g.setAttribute("class","capacity-sum"),g.setAttribute("x","0"),g.setAttribute("y","-3"),g.setAttribute("text-anchor","middle"),g.setAttribute("dominant-baseline","middle"),g.textContent=String(E),f.append(g);let x=document.createElementNS(d,"text");return x.setAttribute("class","capacity-denom"),x.setAttribute("x","0"),x.setAttribute("y","11"),x.setAttribute("text-anchor","middle"),x.textContent=Number.isFinite(i)?`of ${i}`:"unbounded",f.append(x),n.append(f),n}function $(r){return Math.round(r*100)/100}function ct(r){return Math.abs(r.x)<4?"middle":r.x>0?"start":"end"}var V=class extends q{static formAssociated=!0;static get observedAttributes(){return["data-bind-to","data-capacity-points","data-cost-weights","data-radius","data-show-envelope","data-min-rationale","data-max-rationale","data-min-overrun-rationale","data-max-overrun-rationale","disabled","locked"]}#i;#t=[...P];#e={};#r={};#a=_(P);#s="";#y=!1;#l=null;#g=null;#u={};#h=null;constructor(){super(),this.#i=this.attachInternals(),this._adoptInternals(this.#i)}setup(){this.#m(),this.#x(),this.#o(),this.#$(),this.listen(this,"click",t=>this.#A(t)),this.listen(this,"keydown",t=>this.#E(t)),this.listen(this,"input",t=>this.#S(t))}teardown(){this.#l?.(),this.#l=null}attributeChangedCallback(t){this.isConnected&&(t==="data-bind-to"?(this.#x(),this.#o()):t==="data-capacity-points"?this.#o():t==="data-cost-weights"?(this.#m(),this.#o()):t==="data-radius"||t==="data-show-envelope"?this.#o():(t==="disabled"||t==="locked")&&this.#q())}get vector(){return{...this.#e}}set vector(t){this.#O(t),this.#c("property")}get rationales(){return{...this.#r}}set rationales(t){this.#L(t),this.#c("property")}get costWeights(){return{...this.#a}}get capacityPoints(){return this.#n()}set capacityPoints(t){this.#g=Number.isFinite(+t)?+t:null,this.#c("property")}get criticalSum(){return R(this.#e,this.#a)}get overBudget(){let t=this.#n();return Number.isFinite(t)&&this.criticalSum>t}get overrunRationale(){return this.#s}set overrunRationale(t){this.#s=String(t??"");let e=this.querySelector("[data-quality-overrun] textarea");e&&(e.value=this.#s),this.#b()}get ilities(){return[...this.#t]}set ilities(t){!Array.isArray(t)||t.length===0||(this.#t=[...t],this.#m(),this.#c("property"))}get value(){return{vector:{...this.#e},rationales:{...this.#r},costWeights:{...this.#a},capacityPoints:this.#w(),capacitySource:this.#C(),criticalSum:this.criticalSum,overrunRationale:this.#s||void 0,ironTriangleHash:this.#M()}}openEditor(t){if(!this.#t.includes(t))return;let e=this.#N(t);typeof e.showModal=="function"?e.showModal():e.setAttribute("open","")}checkValidity(){let{valid:t,errors:e}=X({vector:this.#e,rationales:this.#r,costWeights:this.#a,capacityPoints:this.#n(),overrunRationale:this.#s,minRationale:this.#d(),minOverrunRationale:this.#f()});this.setState("missing-rationale",!t);let i=this.querySelector("[data-quality-errors]");return i&&(i.textContent=e.join(" ")),t}#A(t){let e=t.target.closest?.(".axis[data-ility]");e&&this.contains(e)&&(t.preventDefault(),this.openEditor(e.dataset.ility))}#E(t){if(t.key!=="Enter"&&t.key!==" ")return;let e=t.target.closest?.(".axis[data-ility]");e&&this.contains(e)&&(t.preventDefault(),this.openEditor(e.dataset.ility))}#S(t){let e=t.target;e?.matches?.("[data-quality-overrun] textarea")&&(this.#s=e.value,this.checkValidity(),this.#b())}#N(t){if(this.#u[t])return this.#v(t),this.#u[t];let e=document.createElement("dialog");e.className=`quality-dialog quality-dialog--${t}`,e.setAttribute("aria-label",`${w(t)} \u2014 edit priority`);let i=document.createElement("form");i.method="dialog",i.setAttribute("data-layout","stack"),i.setAttribute("data-layout-gap","m");let a=document.createElement("h3");a.textContent=w(t),i.append(a);let n=document.createElement("fieldset");n.setAttribute("data-layout","stack"),n.setAttribute("data-layout-gap","2xs");let c=document.createElement("legend");c.textContent="Priority",n.append(c);for(let E of I){let C=document.createElement("label"),y=document.createElement("input");y.type="radio",y.name="level",y.value=E,C.append(y,document.createTextNode(" "+B[E])),n.append(C)}i.append(n);let l=document.createElement("form-field"),p=document.createElement("label");p.setAttribute("for",`quality-${t}-rationale`),p.textContent="Rationale (required when Critical)";let m=document.createElement("textarea");m.id=`quality-${t}-rationale`,m.name="rationale",m.rows=3,m.minLength=this.#d(),m.maxLength=this.#I(),m.placeholder=`Why \u2265 ${this.#d()} chars`,l.append(p,m),i.append(l);let u=document.createElement("p");u.className="message message-error",u.dataset.dialogError="",u.hidden=!0,i.append(u);let h=document.createElement("div");h.setAttribute("data-layout","cluster"),h.setAttribute("data-layout-gap","s"),h.setAttribute("data-layout-justify","end");let v=document.createElement("button");v.type="button",v.textContent="Cancel",v.addEventListener("click",()=>e.close("cancel"));let f=document.createElement("button");return f.type="submit",f.textContent="Save",h.append(v,f),i.append(h),e.append(i),this.append(e),this.#u[t]=e,i.addEventListener("submit",E=>{E.preventDefault();let y=i.querySelector('input[name="level"]:checked')?.value,g=i.querySelector('textarea[name="rationale"]')?.value??"",x=Z({level:y,rationale:g,minRationale:this.#d()});if(!x.ok){u.hidden=!1,u.textContent=x.reason==="pick-level"?"Pick a priority level.":`Rationale must be at least ${this.#d()} characters.`;return}this.#e[t]=y??"",y==="critical"?this.#r[t]=g.trim():delete this.#r[t],e.close("save"),this.#c("dialog",t)}),this.#v(t),e}#v(t){let e=this.#u[t];if(!e)return;let i=this.#e[t];for(let c of e.querySelectorAll('input[name="level"]')){let l=c;l.checked=l.value===i}let a=e.querySelector('textarea[name="rationale"]');a&&(a.value=this.#r[t]||"");let n=e.querySelector("[data-dialog-error]");n&&(n.hidden=!0,n.textContent="")}#$(){if(this.#h)return;let t=document.createElement("section");t.className="quality-footer",t.dataset.qualityFooter="",t.setAttribute("data-layout","stack"),t.setAttribute("data-layout-gap","s");let e=document.createElement("section");e.dataset.qualityOverrun="",e.hidden=!0,e.innerHTML=`
|
|
2
|
-
<strong>Over budget \u2014 explain why.</strong>
|
|
3
|
-
<small data-overrun-prompt></small>
|
|
4
|
-
<form-field>
|
|
5
|
-
<label for="quality-overrun">Overrun rationale (\u2265 ${this.#f()} chars)</label>
|
|
6
|
-
<textarea id="quality-overrun" name="overrunRationale"
|
|
7
|
-
minlength="${this.#f()}"
|
|
8
|
-
maxlength="${this.#R()}"
|
|
9
|
-
rows="3"></textarea>
|
|
10
|
-
</form-field>
|
|
11
|
-
`,t.append(e);let i=document.createElement("p");i.dataset.qualityErrors="",i.className="message message-error",i.setAttribute("role","alert"),t.append(i),this.append(t),this.#h=t}#k(){if(!this.#h)return;let t=this.#n(),e=this.criticalSum,i=Number.isFinite(t)&&e>t,a=this.#h.querySelector("[data-quality-overrun]");if(a){a.hidden=!i;let n=a.querySelector("[data-overrun-prompt]");n&&Number.isFinite(t)&&(n.textContent=`You're over budget by ${e-t} points (${e}/${t}).`)}}#m(){let t=Q(this.getAttribute("data-cost-weights")||"");this.#a=_(this.#t,t)}#O(t){if(!(!t||typeof t!="object"))for(let[e,i]of Object.entries(t))I.includes(i)&&(this.#e[e]=i)}#L(t){if(!(!t||typeof t!="object"))for(let[e,i]of Object.entries(t))this.#r[e]=String(i??"")}#n(){let t=this.#p();if(t&&Number.isFinite(t.capacityPoints)&&t.capacityPoints>0)return t.capacityPoints;let e=Number(this.getAttribute("data-capacity-points"));if(Number.isFinite(e)&&e>0)return e;let i=this.#g;return i!==null&&Number.isFinite(i)&&i>0?i:1/0}#w(){let t=this.#n();return Number.isFinite(t)?t:null}#C(){let t=this.#p();return t?.capacitySource==="manual"?"manual":t?"formula":(this.getAttribute("data-capacity-points"),"manual")}#p(){let t=this.getAttribute("data-bind-to");if(!t)return null;let e=this.getRootNode(),i=e.getElementById?e.getElementById(t):document.getElementById(t);return i&&i.localName==="iron-triangle"?i:null}#M(){return this.#p()?.hash||null}#x(){this.#l?.(),this.#l=null;let t=this.#p();if(!t)return;let e=()=>this.#c("iron-triangle");t.addEventListener("iron-triangle:change",e),this.#l=()=>t.removeEventListener("iron-triangle:change",e)}#o(){let t=lt(Number(this.dataset.radius??100),30,400),e=this.#n(),i=et({ilities:this.#t,vector:this.#e,costWeights:this.#a,capacityPoints:e,radius:t}),a=this.querySelector(":scope > svg");a?a.replaceWith(i):this.prepend(i)}#c(t,e){this.#o(),this.#k();let i=this.#n(),a=this.criticalSum,n=Number.isFinite(i)&&a>i;if(this.setState("over-budget",n),this.#b(),n!==this.#y){let c=n?"quality-target:over-budget":"quality-target:under-budget",l=n?{delta:a-i,criticalSum:a,capacityPoints:i}:{slack:i-a,criticalSum:a,capacityPoints:i};this.dispatchEvent(new CustomEvent(c,{bubbles:!0,composed:!0,detail:l})),this.#y=n}this.dispatchEvent(new CustomEvent("quality-target:change",{bubbles:!0,composed:!0,detail:{...this.value,source:t,field:e}}))}#b(){try{this.#i.setFormValue(JSON.stringify(this.value))}catch{}}#q(){let t=this.hasAttribute("disabled")||this.hasAttribute("locked");for(let e of Object.values(this.#u))for(let i of e.querySelectorAll("input, textarea, select, button"))i.disabled=t}#d(){return Math.max(0,parseInt(this.dataset.minRationale??"10",10)||10)}#I(){return Math.max(10,parseInt(this.dataset.maxRationale??"200",10)||200)}#f(){return Math.max(0,parseInt(this.dataset.minOverrunRationale??"10",10)||10)}#R(){return Math.max(10,parseInt(this.dataset.maxOverrunRationale??"400",10)||400)}};function lt(r,t,e){return Math.max(t,Math.min(e,r))}U("quality-target",V);export{V as QualityTarget};
|
|
12
|
-
//# sourceMappingURL=quality-target.js.map
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
var c=`
|
|
2
|
-
:host {
|
|
3
|
-
--_padding: var(--requirement-card-padding, var(--size-m, 1rem));
|
|
4
|
-
--_radius: var(--requirement-card-radius, var(--radius-m, 0.5rem));
|
|
5
|
-
--_gap: var(--requirement-card-gap, var(--size-2xs, 0.25rem));
|
|
6
|
-
--_surface: var(--requirement-card-surface, var(--color-surface, #fff));
|
|
7
|
-
--_border: var(--requirement-card-border, 1px solid var(--color-border, #e5e7eb));
|
|
8
|
-
--_text: var(--requirement-card-text, var(--color-text, #1a1a1a));
|
|
9
|
-
--_muted: var(--requirement-card-muted, var(--color-text-muted, #6b7280));
|
|
10
|
-
--_critical-bg: var(--requirement-card-critical-bg, var(--color-error-subtle, oklch(95% 0.05 27)));
|
|
11
|
-
--_critical-fg: var(--requirement-card-critical-fg, var(--color-error, #dc2626));
|
|
12
|
-
--_important-bg: var(--requirement-card-important-bg, var(--color-warning-subtle, oklch(95% 0.05 80)));
|
|
13
|
-
--_important-fg: var(--requirement-card-important-fg, var(--color-warning, #b45309));
|
|
14
|
-
--_acceptable-bg: var(--requirement-card-acceptable-bg, var(--color-success-subtle, oklch(95% 0.05 145)));
|
|
15
|
-
--_acceptable-fg: var(--requirement-card-acceptable-fg, var(--color-success, #15803d));
|
|
16
|
-
--_skipped-bg: var(--requirement-card-skipped-bg, var(--color-surface-raised, var(--color-surface, #f5f5f5)));
|
|
17
|
-
--_skipped-fg: var(--requirement-card-skipped-fg, var(--color-text-muted, #6b7280));
|
|
18
|
-
--_conflict: var(--requirement-card-conflict-color, var(--color-error, #dc2626));
|
|
19
|
-
|
|
20
|
-
display: block;
|
|
21
|
-
padding: var(--_padding);
|
|
22
|
-
border-radius: var(--_radius);
|
|
23
|
-
background: var(--_surface);
|
|
24
|
-
border: var(--_border);
|
|
25
|
-
color: var(--_text);
|
|
26
|
-
container-type: inline-size;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.card {
|
|
30
|
-
display: grid;
|
|
31
|
-
gap: var(--_gap);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.head {
|
|
35
|
-
display: flex;
|
|
36
|
-
align-items: baseline;
|
|
37
|
-
justify-content: space-between;
|
|
38
|
-
gap: var(--size-s, 0.75rem);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.name {
|
|
42
|
-
font-weight: var(--font-weight-semibold, 600);
|
|
43
|
-
font-size: var(--font-size-md, 1rem);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.badge ::slotted([slot="badge"]) {
|
|
47
|
-
font-size: var(--font-size-xs, 0.75em);
|
|
48
|
-
color: var(--_muted);
|
|
49
|
-
text-transform: uppercase;
|
|
50
|
-
letter-spacing: 0.05em;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.pill ::slotted([slot="priority-pill"]),
|
|
54
|
-
.priority-default {
|
|
55
|
-
display: inline-block;
|
|
56
|
-
padding: 0.15em 0.6em;
|
|
57
|
-
border-radius: var(--radius-pill, 999px);
|
|
58
|
-
font-size: var(--font-size-xs, 0.75em);
|
|
59
|
-
font-weight: var(--font-weight-semibold, 600);
|
|
60
|
-
text-transform: uppercase;
|
|
61
|
-
letter-spacing: 0.05em;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/* Priority-driven surface tinting on the card itself (when no slotted pill) */
|
|
65
|
-
:host(:state(priority-critical)) { border-color: var(--_critical-fg); }
|
|
66
|
-
:host(:state(priority-important)) { border-color: var(--_important-fg); }
|
|
67
|
-
:host(:state(priority-acceptable)) { border-color: var(--_acceptable-fg); }
|
|
68
|
-
:host(:state(priority-not-relevant)) { opacity: 0.6; }
|
|
69
|
-
|
|
70
|
-
:host(:state(priority-critical)) .priority-default { background: var(--_critical-bg); color: var(--_critical-fg); }
|
|
71
|
-
:host(:state(priority-important)) .priority-default { background: var(--_important-bg); color: var(--_important-fg); }
|
|
72
|
-
:host(:state(priority-acceptable)) .priority-default { background: var(--_acceptable-bg); color: var(--_acceptable-fg); }
|
|
73
|
-
:host(:state(priority-not-relevant)) .priority-default { background: var(--_skipped-bg); color: var(--_skipped-fg); text-decoration: line-through; }
|
|
74
|
-
|
|
75
|
-
/* Hide the default pill when the author supplied one via slot */
|
|
76
|
-
:host(:state(has-priority-pill)) .priority-default { display: none; }
|
|
77
|
-
|
|
78
|
-
.rationale ::slotted([slot="rationale"]) {
|
|
79
|
-
color: var(--_muted);
|
|
80
|
-
font-size: var(--font-size-sm, 0.875rem);
|
|
81
|
-
line-height: 1.45;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.conflicts ::slotted([slot="conflicts"]) {
|
|
85
|
-
color: var(--_conflict);
|
|
86
|
-
font-size: var(--font-size-sm, 0.875rem);
|
|
87
|
-
font-weight: var(--font-weight-semibold, 600);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/* When no rationale or conflicts content, collapse the slot row */
|
|
91
|
-
:host(:not(:state(has-rationale))) .rationale,
|
|
92
|
-
:host(:not(:state(has-conflicts))) .conflicts { display: none; }
|
|
93
|
-
|
|
94
|
-
/* Conflict flag */
|
|
95
|
-
:host([data-conflict]) {
|
|
96
|
-
border-color: var(--_conflict);
|
|
97
|
-
box-shadow: inset 0 0 0 1px var(--_conflict);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
/* Interactive: bubble click event so parents can wire up navigation */
|
|
101
|
-
:host { cursor: default; }
|
|
102
|
-
:host(:state(interactive)) { cursor: pointer; }
|
|
103
|
-
:host(:state(interactive)):hover { background: color-mix(in oklab, var(--_surface) 92%, currentColor 8%); }
|
|
104
|
-
:host(:focus-visible) {
|
|
105
|
-
outline: 2px solid var(--color-focus-ring, var(--color-interactive, currentColor));
|
|
106
|
-
outline-offset: 2px;
|
|
107
|
-
}
|
|
108
|
-
`;var s=class extends HTMLElement{#e=[];#t;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.#e)t();this.#e=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,r,a){t.addEventListener(e,r,a),this.#e.push(()=>t.removeEventListener(e,r,a))}setup(){}teardown(){}setState(t,e){this.#t||(this.#t=this.attachInternals());let r=this.#t.states;try{e?r.add(t):r.delete(t)}catch{let a=`--${t}`;e?r.add(a):r.delete(a)}}_adoptInternals(t){this.#t||(this.#t=t)}};var v=window.matchMedia("(prefers-reduced-motion: reduce)");var l=new Map;function d(i,t,e={}){let r=e.priority??10,a={impl:t,bundle:e.bundle,contract:e.contract,priority:r},o=l.get(i);if(customElements.get(i)){if(!o||o.priority>=r){o&&o.priority===r&&o.impl!==t&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${o.bundle}" (priority ${o.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${i}> defined by "${o.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(o&&o.priority>=r){o.priority===r&&console.warn(`[VB Bundle] Tag <${i}> already registered by "${o.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}l.set(i,a),customElements.define(i,t)}var p=Object.freeze(["critical","important","acceptable","not-relevant"]),f=Object.freeze({critical:"Critical",important:"Important",acceptable:"Acceptable","not-relevant":"Not relevant"}),u=["badge","priority-pill","rationale","conflicts"],h=`
|
|
109
|
-
<style>${c}</style>
|
|
110
|
-
<article class="card" part="card">
|
|
111
|
-
<header class="head" part="head">
|
|
112
|
-
<span class="name" part="name"><slot name="name"></slot></span>
|
|
113
|
-
<span class="badge" part="badge"><slot name="badge"></slot></span>
|
|
114
|
-
</header>
|
|
115
|
-
<span class="pill" part="pill">
|
|
116
|
-
<slot name="priority-pill"><span class="priority-default" part="priority-default" data-priority-default></span></slot>
|
|
117
|
-
</span>
|
|
118
|
-
<p class="rationale" part="rationale"><slot name="rationale"></slot></p>
|
|
119
|
-
<p class="conflicts" part="conflicts"><slot name="conflicts"></slot></p>
|
|
120
|
-
</article>
|
|
121
|
-
`,n=class extends s{static get observedAttributes(){return["data-priority","data-conflict","tabindex"]}setup(){if(this.shadowRoot)for(let t of u){let e=this.shadowRoot.querySelector(`slot[name="${t}"]`);this.#t(t,e)}else{let t=this.attachShadow({mode:"open"});t.innerHTML=h;for(let e of u){let r=t.querySelector(`slot[name="${e}"]`);r?.addEventListener("slotchange",()=>this.#t(e,r)),this.#t(e,r)}}this.#r(),this.#o(),this.#a(),this.listen(this,"click",t=>this.#i(t)),this.listen(this,"keydown",t=>{let e=t;(e.key==="Enter"||e.key===" ")&&this.#e&&(e.preventDefault(),this.#i(e))})}attributeChangedCallback(t){this.isConnected&&(t==="data-priority"?(this.#r(),this.#o()):t==="data-conflict"||t==="tabindex"&&this.#a())}get priority(){return(this.dataset.priority||"").toLowerCase()}set priority(t){let e=String(t||"").toLowerCase();p.includes(e)?this.dataset.priority=e:delete this.dataset.priority}get hasConflict(){return this.hasAttribute("data-conflict")}set hasConflict(t){t?this.setAttribute("data-conflict",""):this.removeAttribute("data-conflict")}get#e(){return this.hasAttribute("tabindex")||this.closest("a[href], button")}#t(t,e){let r=!!e&&e.assignedNodes({flatten:!0}).some(a=>a.nodeType===Node.ELEMENT_NODE||a.nodeType===Node.TEXT_NODE&&a.textContent.trim().length>0);this.setState(`has-${t}`,r)}#r(){let t=(this.dataset.priority||"").toLowerCase();for(let e of p)this.setState(`priority-${e}`,e===t)}#o(){let t=(this.dataset.priority||"").toLowerCase(),e=this.shadowRoot?.querySelector("[data-priority-default]");e&&(e.textContent=f[t]||"")}#a(){this.setState("interactive",!!this.#e)}#i(t){this.#e&&this.dispatchEvent(new CustomEvent("requirement-card:click",{bubbles:!0,composed:!0,detail:{priority:this.priority||null,hasConflict:this.hasConflict,originalEvent:t}}))}};d("requirement-card",n);export{n as RequirementCard};
|
|
122
|
-
//# sourceMappingURL=requirement-card.js.map
|