import '@volvo-cars/css/tokens.css';
import '@volvo-cars/css/styles_all-media.css';
import './volvo.css';
document.querySelector('#root').innerHTML=`<main><header><p class="eyebrow">OpenDesign · Original planning study</p><h1>A little room for the weekend.</h1><p class="intro">Build a simple packing plan with selectable cards. These sample choices are not vehicle options or product specifications.</p><label class="mode">Color mode <select id="mode"><option value="light">Light</option><option value="dark">Dark</option></select></label></header><div class="composition"><div><fieldset class="stack-16"><legend>Choose your plan</legend><label class="selectable-card"><input type="radio" name="plan" value="city" checked><span slot="title">A day in the city</span><span slot="meta">Travel light</span><span slot="description">Space for a day bag and the things you use most.</span></label><label class="selectable-card"><input type="radio" name="plan" value="coast"><span slot="title">A quiet coastal break</span><span slot="meta">Stay a little longer</span><span slot="description">Bring layers, a weekend bag and time to pause.</span></label></fieldset><fieldset class="stack-16 extras"><legend>Add to your checklist</legend><label class="selectable-card"><input type="checkbox" value="water"><span slot="title">Water and a reusable cup</span><span slot="description">Keep everyday essentials close at hand.</span></label><label class="selectable-card"><input type="checkbox" value="layers"><span slot="title">An extra layer</span><span slot="description">Prepare for a change in the weather.</span></label></fieldset></div><aside class="summary bg-secondary p-24 shape-default"><p class="eyebrow">Your local checklist</p><h2 id="plan-title">A day in the city</h2><ul id="items"></ul><p id="count" role="status"></p><button type="button" class="button-filled" id="save">Keep this plan</button><button type="button" class="button-text" id="reset">Start again</button><p id="saved" role="status" hidden></p></aside></div><p class="note">Published Volvo Cars CSS 2.5.1 selectable-card styling with original packing content and local behavior. The preview uses the stylesheet’s system-font fallback; Volvo font assets are not bundled. Nothing is booked, purchased or sent.</p></main>`;
const plans={city:{title:'A day in the city',items:['Day bag','Comfortable shoes']},coast:{title:'A quiet coastal break',items:['Weekend bag','Route notes','A good book']}};const extras={water:'Water and a reusable cup',layers:'An extra layer'};let current='city';
function render(){current=document.querySelector('[name=plan]:checked').value;let list=[...plans[current].items,...[...document.querySelectorAll('.extras input:checked')].map(e=>extras[e.value])];document.querySelector('#plan-title').textContent=plans[current].title;const ul=document.querySelector('#items');ul.replaceChildren(...list.map(x=>{let li=document.createElement('li');li.textContent=x;return li}));document.querySelector('#count').textContent=`${list.length} things on your checklist`;document.querySelector('#saved').hidden=true;}
document.querySelectorAll('fieldset input').forEach(e=>e.addEventListener('change',render));document.querySelector('#mode').addEventListener('change',e=>document.documentElement.dataset.colorMode=e.target.value);document.querySelector('#save').addEventListener('click',()=>{let p=document.querySelector('#saved');p.hidden=false;p.textContent='Plan kept in this page. Changing a choice will clear this confirmation.';});document.querySelector('#reset').addEventListener('click',()=>{document.querySelector('[value=city]').checked=true;document.querySelectorAll('.extras input').forEach(e=>e.checked=false);render();document.querySelector('[value=city]').focus();});render();
npm create vite@latest weekend-plan -- --template vanilla
cd weekend-plan
npm install
npm install @volvo-cars/[email protected]
# Save index.html at the root; main.js and volvo.css in src.
npm run dev
