added bundle revit and about

dist/assets/About-BjwY-TOY.js

@@ -0,0 +1 @@
+import{C as e,T as t,c as n,j as r,l as i,lt as a,p as o,r as s,s as c,st as l,u}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as d}from"./Badge-DcvgVKep.js";var f={id:`about`,class:`bg-cream text-ink`},p={class:`mx-auto w-full max-w-6xl px-6 py-16 sm:px-8 sm:py-20 md:px-12 md:py-24 lg:px-16 lg:py-28`},m={class:`flex flex-col items-center text-center gap-4 max-w-3xl mx-auto`},h={key:1,class:`font-display font-normal leading-[1.05] tracking-tight text-ink`,style:{"font-size":`clamp(2.25rem, 5vw, 3.75rem)`}},g={key:2,class:`text-lg leading-relaxed text-muted max-w-2xl`},_={key:0,class:`mt-10 md:mt-16 grid gap-5 md:grid-cols-3 md:gap-6`},v={__name:`About`,props:{eyebrow:{type:String,default:``},headline:{type:String,default:``},sub:{type:String,default:``},milestones:{type:Array,default:()=>[],validator:e=>e.every(e=>e&&typeof e==`object`&&typeof e.year==`string`&&typeof e.title==`string`&&typeof e.text==`string`)}},setup(v){let y=[{card:`bg-paper border-line`,year:`text-muted`,title:`text-ink`,body:`text-muted`},{card:`bg-cream border-line`,year:`text-muted`,title:`text-ink`,body:`text-muted`},{card:`bg-brand border-transparent`,year:`text-accent`,title:`text-cream`,body:`text-cream/80`}];return(b,x)=>(e(),u(`section`,f,[c(`div`,p,[c(`div`,m,[v.eyebrow?(e(),n(d,{key:0,variant:`brand`},{default:r(()=>[o(a(v.eyebrow),1)]),_:1})):i(``,!0),v.headline?(e(),u(`h2`,h,a(v.headline),1)):i(``,!0),v.sub?(e(),u(`p`,g,a(v.sub),1)):i(``,!0)]),v.milestones.length?(e(),u(`ol`,_,[(e(!0),u(s,null,t(v.milestones.slice(0,3),(t,n)=>(e(),u(`li`,{key:t.year+t.title,class:l([`flex flex-col gap-3 rounded-md border p-6 md:p-7`,y[n].card])},[c(`span`,{class:l([`text-xs tracking-label uppercase`,y[n].year])},a(t.year),3),c(`h3`,{class:l([`font-display text-2xl font-normal leading-tight`,y[n].title])},a(t.title),3),c(`p`,{class:l([`text-sm leading-relaxed`,y[n].body])},a(t.text),3)],2))),128))])):i(``,!0)])]))}};export{v as t};

dist/assets/AboutPreview-gjZsLjQG.js

@@ -0,0 +1 @@
+import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as a}from"./i18n-C5xQ6LQM.js";import{t as o}from"./About-BjwY-TOY.js";var s={class:`min-h-screen bg-cream`},c={__name:`AboutPreview`,setup(c){let{t:l}=a(),u=r(()=>[1,2,3].map(e=>({year:l(`about.milestone.${e}.year`),title:l(`about.milestone.${e}.title`),text:l(`about.milestone.${e}.text`)})));return(r,a)=>(e(),i(`div`,s,[n(o,{eyebrow:t(l)(`about.eyebrow`),headline:t(l)(`about.headline`),sub:t(l)(`about.sub`),milestones:u.value},null,8,[`eyebrow`,`headline`,`sub`,`milestones`])]))}};export{c as default};

dist/assets/AboutSection-DcRq8WoQ.js

@@ -0,0 +1,10 @@
+import{C as e,G as t,c as n,j as r,lt as i,m as a,p as o,s}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as c}from"./i18n-C5xQ6LQM.js";import{t as l}from"./SectionShell-BEISUYi8.js";import{t as u}from"./DevicePreview-DvIWByfU.js";var d={class:`eyebrow mb-5`},f=`/design/preview/about`,p={__name:`AboutSection`,setup(p){let{t:m}=c();return(c,p)=>(e(),n(l,{eyebrow:t(m)(`ds.eyebrow.components`),title:t(m)(`ds.about.title`),description:t(m)(`ds.about.description`),wide:``},{default:r(()=>[s(`section`,null,[a(u,{src:f,initial:`desktop`,height:820})]),s(`section`,null,[s(`h2`,d,i(t(m)(`ds.heading.usage`)),1),p[0]||=s(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[s(`pre`,{class:`whitespace-pre-wrap`},`<About
+  :eyebrow="t('about.eyebrow')"
+  :headline="t('about.headline')"
+  :sub="t('about.sub')"
+  :milestones="[1, 2, 3].map((i) => ({
+    year: t(\`about.milestone.\${i}.year\`),
+    title: t(\`about.milestone.\${i}.title\`),
+    text: t(\`about.milestone.\${i}.text\`),
+  }))"
+/>`)],-1)]),p[1]||=s(`section`,null,[s(`h2`,{class:`eyebrow mb-5`},`Tone sequence`),s(`p`,{class:`text-sm text-muted max-w-2xl`},[o(` The three milestone cards cycle the Card primitive's tones left-to-right: `),s(`code`,{class:`font-mono text-[12px]`},`paper`),o(` → `),s(`code`,{class:`font-mono text-[12px]`},`cream`),o(` → `),s(`code`,{class:`font-mono text-[12px]`},`brand`),o(`. The sequence is part of the component's visual contract and is not configurable — see `),s(`code`,{class:`font-mono text-[12px]`},`CARD_TONES`),o(` in `),s(`code`,{class:`font-mono text-[12px]`},`About.vue`),o(`. `)])],-1)]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{p as default};

dist/assets/Badge-DcvgVKep.js

@@ -1 +1 @@
-import{A as e,D as t,S as n,T as r,c as i,o as a,ot as o}from"./runtime-core.esm-bundler-DgkFZzbt.js";var s={__name:`Badge`,props:{variant:{type:String,default:`neutral`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},uppercase:{type:Boolean,default:!0},as:{type:String,default:`span`,validator:e=>[`span`,`button`].includes(e)}},emits:[`click`],setup(s){let c=s,l={neutral:`bg-cream text-muted border border-line`,brand:`bg-brand text-accent`,accent:`bg-accent text-accent-ink`,subtle:`bg-brand-soft-wash text-brand-soft`,success:`bg-success-wash text-success`,warning:`bg-warning-wash text-warning`,danger:`bg-danger-wash text-danger`},u={neutral:`hover:bg-cream-wash`,brand:`hover:bg-brand-hover`,accent:`hover:bg-accent-soft`,subtle:`hover:bg-brand-wash`,success:`hover:opacity-90`,warning:`hover:opacity-90`,danger:`hover:opacity-90`},d=a(()=>[`inline-flex items-center gap-1 px-[11px] py-[5px] rounded-pill text-[11px] font-bold tracking-eyebrow`,c.uppercase?`uppercase`:``,l[c.variant],c.as===`button`?`${u[c.variant]} transition-colors`:``]);return(a,c)=>(n(),i(t(s.as),{type:s.as===`button`?`button`:void 0,class:o(d.value),onClick:c[0]||=e=>s.as===`button`&&a.$emit(`click`,e)},{default:e(()=>[r(a.$slots,`default`)]),_:3},8,[`type`,`class`]))}};export{s as t};
+import{C as e,E as t,O as n,c as r,j as i,o as a,st as o}from"./runtime-core.esm-bundler-BD0e4RlP.js";var s={__name:`Badge`,props:{variant:{type:String,default:`neutral`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},uppercase:{type:Boolean,default:!0},as:{type:String,default:`span`,validator:e=>[`span`,`button`].includes(e)}},emits:[`click`],setup(s){let c=s,l={neutral:`bg-cream text-muted border border-line`,brand:`bg-brand text-accent`,accent:`bg-accent text-accent-ink`,subtle:`bg-brand-soft-wash text-brand-soft`,success:`bg-success-wash text-success`,warning:`bg-warning-wash text-warning`,danger:`bg-danger-wash text-danger`},u={neutral:`hover:bg-cream-wash`,brand:`hover:bg-brand-hover`,accent:`hover:bg-accent-soft`,subtle:`hover:bg-brand-wash`,success:`hover:opacity-90`,warning:`hover:opacity-90`,danger:`hover:opacity-90`},d=a(()=>[`inline-flex items-center gap-1 px-[11px] py-[5px] rounded-pill text-[11px] font-bold tracking-eyebrow`,c.uppercase?`uppercase`:``,l[c.variant],c.as===`button`?`${u[c.variant]} transition-colors`:``]);return(a,c)=>(e(),r(n(s.as),{type:s.as===`button`?`button`:void 0,class:o(d.value),onClick:c[0]||=e=>s.as===`button`&&a.$emit(`click`,e)},{default:i(()=>[t(a.$slots,`default`)]),_:3},8,[`type`,`class`]))}};export{s as t};

dist/assets/BadgesSection-7hDbaVWU.js

@@ -0,0 +1 @@
+import{C as e,G as t,c as n,j as r,lt as i,m as a,p as o,s}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as c}from"./i18n-C5xQ6LQM.js";import{t as l}from"./Badge-DcvgVKep.js";import{t as u}from"./SectionShell-BEISUYi8.js";import{t as d}from"./Card-DM27vc3f.js";var f={class:`eyebrow mb-5`},p={class:`flex flex-wrap gap-3`},m={class:`eyebrow mb-5`},h={class:`flex flex-wrap gap-3`},g={__name:`BadgesSection`,setup(g){let{t:_}=c();return(c,g)=>(e(),n(u,{eyebrow:t(_)(`ds.eyebrow.components`),title:t(_)(`ds.badges.title`),description:t(_)(`ds.badges.description`)},{default:r(()=>[s(`section`,null,[s(`h2`,f,i(t(_)(`ds.heading.variants`)),1),a(d,{tone:`paper`},{default:r(()=>[s(`div`,p,[a(l,{variant:`neutral`},{default:r(()=>[o(i(t(_)(`ds.badges.neutral`)),1)]),_:1}),a(l,{variant:`brand`},{default:r(()=>[o(i(t(_)(`ds.badges.brand`)),1)]),_:1}),a(l,{variant:`accent`},{default:r(()=>[o(i(t(_)(`ds.badges.accent`)),1)]),_:1}),a(l,{variant:`subtle`},{default:r(()=>[o(i(t(_)(`ds.badges.subtle`)),1)]),_:1}),a(l,{variant:`success`},{default:r(()=>[o(i(t(_)(`ds.badges.success`)),1)]),_:1}),a(l,{variant:`warning`},{default:r(()=>[o(i(t(_)(`ds.badges.warning`)),1)]),_:1}),a(l,{variant:`danger`},{default:r(()=>[o(i(t(_)(`ds.badges.danger`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,m,i(t(_)(`ds.heading.nonUppercase`)),1),a(d,{tone:`paper`},{default:r(()=>[s(`div`,h,[a(l,{variant:`brand`,uppercase:!1},{default:r(()=>[o(i(t(_)(`ds.badges.newRelease`)),1)]),_:1}),a(l,{variant:`accent`,uppercase:!1},{default:r(()=>[o(i(t(_)(`ds.badges.featured`)),1)]),_:1}),a(l,{variant:`subtle`,uppercase:!1},{default:r(()=>[...g[0]||=[o(`v2.1.0`,-1)]]),_:1})])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{g as default};

dist/assets/BadgesSection-DKxt-yNd.js

@@ -1 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,m as a,p as o,s}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as c}from"./i18n-BxXwPz8H.js";import{t as l}from"./Badge-D2T2EdKQ.js";import{t as u}from"./SectionShell-CHsfR9Y3.js";import{t as d}from"./Card-BhcSEJNV.js";var f={class:`eyebrow mb-5`},p={class:`flex flex-wrap gap-3`},m={class:`eyebrow mb-5`},h={class:`flex flex-wrap gap-3`},g={__name:`BadgesSection`,setup(g){let{t:_}=c();return(c,g)=>(t(),r(u,{eyebrow:n(_)(`ds.eyebrow.components`),title:n(_)(`ds.badges.title`),description:n(_)(`ds.badges.description`)},{default:e(()=>[s(`section`,null,[s(`h2`,f,i(n(_)(`ds.heading.variants`)),1),a(d,{tone:`paper`},{default:e(()=>[s(`div`,p,[a(l,{variant:`neutral`},{default:e(()=>[o(i(n(_)(`ds.badges.neutral`)),1)]),_:1}),a(l,{variant:`brand`},{default:e(()=>[o(i(n(_)(`ds.badges.brand`)),1)]),_:1}),a(l,{variant:`accent`},{default:e(()=>[o(i(n(_)(`ds.badges.accent`)),1)]),_:1}),a(l,{variant:`subtle`},{default:e(()=>[o(i(n(_)(`ds.badges.subtle`)),1)]),_:1}),a(l,{variant:`success`},{default:e(()=>[o(i(n(_)(`ds.badges.success`)),1)]),_:1}),a(l,{variant:`warning`},{default:e(()=>[o(i(n(_)(`ds.badges.warning`)),1)]),_:1}),a(l,{variant:`danger`},{default:e(()=>[o(i(n(_)(`ds.badges.danger`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,m,i(n(_)(`ds.heading.nonUppercase`)),1),a(d,{tone:`paper`},{default:e(()=>[s(`div`,h,[a(l,{variant:`brand`,uppercase:!1},{default:e(()=>[o(i(n(_)(`ds.badges.newRelease`)),1)]),_:1}),a(l,{variant:`accent`,uppercase:!1},{default:e(()=>[o(i(n(_)(`ds.badges.featured`)),1)]),_:1}),a(l,{variant:`subtle`,uppercase:!1},{default:e(()=>[...g[0]||=[o(`v2.1.0`,-1)]]),_:1})])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{g as default};

dist/assets/BundleCard-BXSqQ66g.js

@@ -0,0 +1 @@
+import{C as e,G as t,O as n,T as r,c as i,j as a,l as o,lt as s,m as c,o as l,p as u,r as d,s as f,st as p,u as m}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as h}from"./Icon-BCRRMV3J.js";import{t as g}from"./i18n-C5xQ6LQM.js";import{t as _}from"./Badge-DcvgVKep.js";import{t as v}from"./Button-DkdaDkuf.js";var y=[`src`,`alt`],b={class:`flex flex-col gap-1.5`},x={key:0,class:`text-xs font-semibold tracking-label text-muted uppercase`},S={class:`flex flex-col gap-1.5`},C={key:0,class:`text-sm text-muted tracking-label`},w={class:`flex flex-col gap-0.5`},T={class:`text-xs tracking-label text-muted uppercase`},E={class:`font-display text-2xl font-normal text-brand leading-none`},D={key:0,class:`text-xs text-muted mt-1`},O={key:1,class:`text-xs font-semibold tracking-label uppercase text-danger mt-1`},k=3,A={__name:`BundleCard`,props:{name:{type:String,required:!0},items:{type:Array,required:!0},price:{type:Number,required:!0},memberPrice:{type:Number,default:null},usage:{type:String,default:``},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`].includes(e)},layout:{type:String,default:`vertical`,validator:e=>[`vertical`,`horizontal`].includes(e)},inStock:{type:Boolean,default:!0},currency:{type:String,default:`€`},href:{type:String,default:``}},emits:[`add`],setup(A){let j=A,{t:M}=g(),N={paper:{surface:`bg-paper`,media:`bg-cream`,border:`border-line`},cream:{surface:`bg-cream`,media:`bg-paper`,border:`border-line`}},P=l(()=>N[j.tone]);function F(e){return`${j.currency} ${e.toFixed(2).replace(`.`,`,`)}`}let I=l(()=>F(j.price)),L=l(()=>j.memberPrice==null?``:F(j.memberPrice)),R=l(()=>j.items.slice(0,k)),z=l(()=>Math.max(0,j.items.length-k));return(l,g)=>(e(),m(`article`,{class:p([`group flex overflow-hidden rounded-md border transition-all duration-base ease-out`,A.layout===`horizontal`?`flex-col md:flex-row`:`flex-col`,P.value.surface,P.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[(e(),i(n(A.href?`a`:`div`),{href:A.href||null,class:p([`relative block overflow-hidden`,A.layout===`horizontal`?`aspect-[4/3] md:aspect-auto md:w-[38%] md:shrink-0 md:min-h-[300px]`:`aspect-[4/3]`,P.value.media])},{default:a(()=>[A.badge?(e(),i(_,{key:0,variant:A.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:a(()=>[u(s(A.badge),1)]),_:1},8,[`variant`])):o(``,!0),f(`img`,{src:A.image,alt:A.imageAlt||A.name,loading:`lazy`,decoding:`async`,class:p([`absolute inset-0 w-full h-full object-contain transition-transform duration-slow ease-out group-hover:scale-105`,A.layout===`horizontal`?`p-6 md:p-5`:`p-8`])},null,10,y)]),_:1},8,[`href`,`class`])),f(`div`,{class:p([`flex flex-col gap-4 p-6`,A.layout===`horizontal`?`md:p-6 md:flex-1`:``])},[f(`div`,b,[A.usage?(e(),m(`span`,x,s(A.usage),1)):o(``,!0),(e(),i(n(A.href?`a`:`h3`),{href:A.href||null,class:p([`font-display text-xl font-normal leading-tight text-ink`,A.href?`hover:text-brand transition-colors duration-base`:``])},{default:a(()=>[u(s(A.name),1)]),_:1},8,[`href`,`class`]))]),f(`ul`,S,[(e(!0),m(d,null,r(R.value,t=>(e(),m(`li`,{key:t,class:`text-sm text-ink/80 leading-relaxed`},s(t),1))),128)),z.value>0?(e(),m(`li`,C,`+ `+s(z.value)+` `+s(t(M)(`bundles.card.moreItems`)),1)):o(``,!0)]),f(`div`,{class:p([`mt-auto pt-4 border-t border-line flex gap-3`,A.layout===`horizontal`?`flex-col sm:flex-row sm:items-end sm:justify-between`:`flex-col`])},[f(`div`,w,[f(`span`,T,s(t(M)(`bundles.card.priceLabel`)),1),f(`span`,E,s(I.value),1),L.value?(e(),m(`span`,D,s(t(M)(`bundles.card.memberPrefix`))+` `+s(L.value),1)):o(``,!0),A.inStock?o(``,!0):(e(),m(`span`,O,s(t(M)(`ds.product.outOfStock`)),1))]),c(v,{variant:`primary`,size:`md`,block:A.layout===`vertical`,disabled:!A.inStock,onClick:g[0]||=e=>l.$emit(`add`)},{before:a(()=>[c(h,{name:`plus`,size:16})]),default:a(()=>[u(` `+s(t(M)(`ds.buttons.addToCart`)),1)]),_:1},8,[`block`,`disabled`])],2)],2)],2))}};export{A as t};

dist/assets/BundleCardSection-DTCOJpL9.js

@@ -0,0 +1,17 @@
+import{B as e,C as t,G as n,c as r,j as i,l as a,lt as o,m as s,p as c,s as l,u,y as d}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as f}from"./i18n-C5xQ6LQM.js";import{t as p}from"./BundleCard-BXSqQ66g.js";import{t as m}from"./SectionShell-BEISUYi8.js";var h={class:`eyebrow mb-5`},g={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},_={key:0,class:`mt-5 text-sm text-muted`},v={class:`font-mono text-[12px]`},y={class:`grid gap-6`},b={class:`eyebrow mb-5`},x={class:`grid sm:grid-cols-2 gap-6`},S={class:`eyebrow mb-5`},C=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png`,w={__name:`BundleCardSection`,setup(w){let{t:T}=f(),E=e(``);function D(e){E.value=e,setTimeout(()=>{E.value===e&&(E.value=``)},2e3)}let O={name:`Haushalts-Bundle`,usage:`2–3× pro Quartal empfohlen`,items:[`1× Kaiser-Natron Pulver 250 g`,`1× Allzweck-Spray 500 ml`,`1× Spülmittel 500 ml`],price:24.9,memberPrice:21.17,image:C,imageAlt:`Haushalts-Bundle`},k={...O,items:[...O.items,`1× Holste Wasch-Soda 500 g`,`1× Allzweckreiniger 750 ml`]};return(e,f)=>(t(),r(m,{eyebrow:n(T)(`ds.eyebrow.components`),title:n(T)(`ds.bundleCard.title`),description:n(T)(`ds.bundleCard.description`)},{default:i(()=>[l(`section`,null,[l(`h2`,h,o(n(T)(`ds.heading.default`)),1),l(`div`,g,[s(p,d(O,{onAdd:f[0]||=e=>D(`default`)}),null,16),s(p,d(O,{badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[1]||=e=>D(`bestseller`)}),null,16),s(p,d(O,{tone:`cream`,onAdd:f[2]||=e=>D(`cream`)}),null,16)]),E.value?(t(),u(`p`,_,[c(o(n(T)(`ds.product.added`))+`: `,1),l(`code`,v,o(E.value),1)])):a(``,!0)]),l(`section`,null,[f[5]||=l(`h2`,{class:`eyebrow mb-5`},`Horizontal layout`,-1),f[6]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},[c(` Passed as `),l(`code`,{class:`font-mono text-[12px]`},`layout="horizontal"`),c(`. From `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` up the media takes ~38% of the row and the body fills the rest, with the CTA inlined next to the price block. Below `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` it collapses back to vertical. `)],-1),l(`div`,y,[s(p,d(O,{layout:`horizontal`,badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[3]||=e=>D(`horizontal`)}),null,16)])]),l(`section`,null,[l(`h2`,b,o(n(T)(`ds.heading.states`)),1),f[7]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},` Same bundle across both cards — only the state being demonstrated changes. `,-1),l(`div`,x,[s(p,d(O,{"in-stock":!1}),null,16),s(p,d(k,{onAdd:f[4]||=e=>D(`overflow`)}),null,16)]),f[8]||=l(`p`,{class:`mt-3 text-sm text-muted max-w-2xl`},[c(` More than three items collapse the tail into a `),l(`code`,{class:`font-mono text-[12px]`},`+ N weitere`),c(` line so the card stays scannable. `)],-1)]),l(`section`,null,[l(`h2`,S,o(n(T)(`ds.heading.usage`)),1),f[9]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`<BundleCard
+  name="Haushalts-Bundle"
+  usage="2–3× pro Quartal empfohlen"
+  :items="[
+    '1× Kaiser-Natron Pulver 250 g',
+    '1× Allzweck-Spray 500 ml',
+    '1× Spülmittel 500 ml',
+  ]"
+  :price="24.9"
+  :member-price="21.17"
+  image="/products/cutouts/…-removebg-preview.png"
+  badge="Bestseller"
+  badge-variant="accent"
+  tone="paper"
+  layout="horizontal"
+  @add="addBundle(bundleId)"
+/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{w as default};

dist/assets/Bundles-Cq8LBYMP.css

@@ -0,0 +1 @@
+.no-scrollbar[data-v-d1080e83]::-webkit-scrollbar{display:none}.no-scrollbar[data-v-d1080e83]{scrollbar-width:none;-ms-overflow-style:none}

dist/assets/BundlesPreview-CXOvMVzr.js

@@ -0,0 +1 @@
+import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as a}from"./i18n-C5xQ6LQM.js";import{t as o}from"./Bundles-OY5V_EmX.js";var s={class:`min-h-screen bg-surface`},c={__name:`BundlesPreview`,setup(c){let{t:l}=a(),u=[{id:`haushalt`,name:`Haushalts-Bundle`,usage:`2–3× pro Quartal empfohlen`,items:[`1× Kaiser-Natron Pulver 250 g`,`1× Allzweck-Spray 500 ml`,`1× Spülmittel 500 ml`],price:24.9,memberPrice:21.17,image:`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png`,imageAlt:`Haushalts-Bundle mit Kaiser-Natron`,badge:`Bestseller`,badgeVariant:`accent`},{id:`waesche`,name:`Wäsche & Pflege`,usage:`1–2× pro Quartal`,items:[`1× Holste Wasch-Soda 500 g`,`1× Gazelle Wäschestärke 1 l`,`1× Linda Fleckenweg 200 ml`],price:22.9,memberPrice:19.47,image:`/products/holste-wasch-soda-500-g-beutel.jpg`,imageAlt:`Wäsche & Pflege Bundle`},{id:`wohlfuehl`,name:`Wohlfühl-Bundle`,usage:`1× pro Quartal`,items:[`1× Kaiser-Natron Tabletten 100 g`,`1× Kaiser-Natron Bad 500 g`,`1× Kaiser-Natron Fußbad 500 g`],price:29.9,memberPrice:25.42,image:`/products/kaiser-natron-bad-500-g.jpg`,imageAlt:`Wohlfühl-Bundle`}],d=r(()=>[l(`bundles.benefit.1.title`),l(`bundles.benefit.2.title`),l(`bundles.benefit.3.title`)]);return(r,a)=>(e(),i(`div`,s,[n(o,{bundles:u,headline:t(l)(`bundles.headline.a`),"headline-em":t(l)(`bundles.headline.em`),sub:t(l)(`bundles.sub`),benefits:d.value,"join-cta":t(l)(`bundles.joinCta`)},null,8,[`headline`,`headline-em`,`sub`,`benefits`,`join-cta`])]))}};export{c as default};

dist/assets/BundlesSection-CiIjoPpi.js

@@ -0,0 +1,14 @@
+import{C as e,G as t,c as n,j as r,lt as i,m as a,p as o,s}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as c}from"./i18n-C5xQ6LQM.js";import{t as l}from"./SectionShell-BEISUYi8.js";import{t as u}from"./DevicePreview-DvIWByfU.js";var d={class:`eyebrow mb-5`},f=`/design/preview/bundles`,p={__name:`BundlesSection`,setup(p){let{t:m}=c();return(c,p)=>(e(),n(l,{eyebrow:t(m)(`ds.eyebrow.components`),title:t(m)(`ds.bundles.title`),description:t(m)(`ds.bundles.description`),wide:``},{default:r(()=>[s(`section`,null,[a(u,{src:f,initial:`desktop`,height:1080})]),s(`section`,null,[s(`h2`,d,i(t(m)(`ds.heading.usage`)),1),p[0]||=s(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[s(`pre`,{class:`whitespace-pre-wrap`},`<Bundles
+  :bundles="bundles"
+  :headline="t('bundles.headline.a')"
+  :headline-em="t('bundles.headline.em')"
+  :sub="t('bundles.sub')"
+  :benefits="[
+    t('bundles.benefit.1.title'),
+    t('bundles.benefit.2.title'),
+    t('bundles.benefit.3.title'),
+  ]"
+  :join-cta="t('bundles.joinCta')"
+  @add="addBundle(bundleId)"
+  @join="openSignup()"
+/>`)],-1)]),p[1]||=s(`section`,null,[s(`h2`,{class:`eyebrow mb-5`},`Props`),s(`div`,{class:`rounded-md border border-line bg-paper overflow-x-auto`},[s(`table`,{class:`w-full text-left text-[13px]`},[s(`thead`,{class:`bg-surface border-b border-line`},[s(`tr`,null,[s(`th`,{class:`px-5 py-3 font-semibold tracking-label text-muted uppercase text-[11px]`},`Prop`),s(`th`,{class:`px-5 py-3 font-semibold tracking-label text-muted uppercase text-[11px]`},`Type`),s(`th`,{class:`px-5 py-3 font-semibold tracking-label text-muted uppercase text-[11px]`},`Purpose`)])]),s(`tbody`,{class:`divide-y divide-line`},[s(`tr`,null,[s(`td`,{class:`px-5 py-3 font-mono text-[12px]`},`bundles`),s(`td`,{class:`px-5 py-3 text-muted`},`Array`),s(`td`,{class:`px-5 py-3`},`Required. Array of bundle records rendered by BundleCard.`)]),s(`tr`,null,[s(`td`,{class:`px-5 py-3 font-mono text-[12px]`},`headline / headlineEm / sub`),s(`td`,{class:`px-5 py-3 text-muted`},`String`),s(`td`,{class:`px-5 py-3`},[o(`Sidebar copy; `),s(`code`,{class:`font-mono text-[12px]`},`headlineEm`),o(` is the italicised highlight.`)])]),s(`tr`,null,[s(`td`,{class:`px-5 py-3 font-mono text-[12px]`},`benefits`),s(`td`,{class:`px-5 py-3 text-muted`},`String[]`),s(`td`,{class:`px-5 py-3`},`Sidebar benefit bullets. First three are shown.`)]),s(`tr`,null,[s(`td`,{class:`px-5 py-3 font-mono text-[12px]`},`joinCta`),s(`td`,{class:`px-5 py-3 text-muted`},`String`),s(`td`,{class:`px-5 py-3`},[o(`Label for the sidebar's primary button. Emits `),s(`code`,{class:`font-mono text-[12px]`},`join`),o(`.`)])]),s(`tr`,null,[s(`td`,{class:`px-5 py-3 font-mono text-[12px]`},`carousel*Label`),s(`td`,{class:`px-5 py-3 text-muted`},`String`),s(`td`,{class:`px-5 py-3`},`Override the default carousel a11y labels (prev / next / goToSlide / region label).`)])])])])],-1)]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{p as default};

dist/assets/Button-DkdaDkuf.js

@@ -1 +1 @@
-import{S as e,T as t,l as n,o as r,ot as i,u as a}from"./runtime-core.esm-bundler-DgkFZzbt.js";var o=[`type`,`disabled`],s={key:0,class:`inline-block h-3 w-3 rounded-full border-2 border-current border-t-transparent animate-spin`},c=`inline-flex items-center justify-center gap-2 font-sans font-semibold rounded-pill border transition-all duration-base ease-out disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand`,l={__name:`Button`,props:{variant:{type:String,default:`primary`,validator:e=>[`primary`,`accent`,`secondary`,`ghost`,`danger`].includes(e)},size:{type:String,default:`md`,validator:e=>[`sm`,`md`,`lg`].includes(e)},type:{type:String,default:`button`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},block:{type:Boolean,default:!1}},emits:[`click`],setup(l){let u=l,d={primary:`bg-brand text-accent border-brand hover:bg-brand-hover hover:-translate-y-0.5 hover:shadow-md`,accent:`bg-accent text-brand border-accent hover:bg-accent-soft hover:-translate-y-0.5 hover:shadow-md`,secondary:`bg-transparent text-brand border-brand hover:bg-brand hover:text-accent`,ghost:`bg-transparent text-brand border-transparent hover:bg-brand-wash`,danger:`bg-danger text-white border-danger hover:opacity-90 hover:-translate-y-0.5 hover:shadow-md`},f={sm:`text-[13px] px-[18px] py-[9px] tracking-label`,md:`text-[15px] px-[26px] py-[13px] tracking-label`,lg:`text-[16px] px-[34px] py-[17px] tracking-label`},p=r(()=>[c,d[u.variant],f[u.size],u.block?`w-full`:``]);return(r,c)=>(e(),a(`button`,{type:l.type,disabled:l.disabled||l.loading,class:i(p.value),onClick:c[0]||=e=>r.$emit(`click`,e)},[l.loading?(e(),a(`span`,s)):n(``,!0),t(r.$slots,`before`),t(r.$slots,`default`),t(r.$slots,`after`)],10,o))}};export{l as t};
+import{C as e,E as t,l as n,o as r,st as i,u as a}from"./runtime-core.esm-bundler-BD0e4RlP.js";var o=[`type`,`disabled`],s={key:0,class:`inline-block h-3 w-3 rounded-full border-2 border-current border-t-transparent animate-spin`},c=`inline-flex items-center justify-center gap-2 font-sans font-semibold rounded-pill border transition-all duration-base ease-out disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand`,l={__name:`Button`,props:{variant:{type:String,default:`primary`,validator:e=>[`primary`,`accent`,`secondary`,`ghost`,`danger`].includes(e)},size:{type:String,default:`md`,validator:e=>[`sm`,`md`,`lg`].includes(e)},type:{type:String,default:`button`},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},block:{type:Boolean,default:!1}},emits:[`click`],setup(l){let u=l,d={primary:`bg-brand text-accent border-brand hover:bg-brand-hover hover:-translate-y-0.5 hover:shadow-md`,accent:`bg-accent text-brand border-accent hover:bg-accent-soft hover:-translate-y-0.5 hover:shadow-md`,secondary:`bg-transparent text-brand border-brand hover:bg-brand hover:text-accent`,ghost:`bg-transparent text-brand border-transparent hover:bg-brand-wash`,danger:`bg-danger text-white border-danger hover:opacity-90 hover:-translate-y-0.5 hover:shadow-md`},f={sm:`text-[13px] px-[18px] py-[9px] tracking-label`,md:`text-[15px] px-[26px] py-[13px] tracking-label`,lg:`text-[16px] px-[34px] py-[17px] tracking-label`},p=r(()=>[c,d[u.variant],f[u.size],u.block?`w-full`:``]);return(r,c)=>(e(),a(`button`,{type:l.type,disabled:l.disabled||l.loading,class:i(p.value),onClick:c[0]||=e=>r.$emit(`click`,e)},[l.loading?(e(),a(`span`,s)):n(``,!0),t(r.$slots,`before`),t(r.$slots,`default`),t(r.$slots,`after`)],10,o))}};export{l as t};

dist/assets/ButtonsSection-BluxlJ7h.js

@@ -0,0 +1,4 @@
+import{C as e,G as t,c as n,j as r,lt as i,m as a,p as o,s}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as c}from"./Icon-BCRRMV3J.js";import{t as l}from"./i18n-C5xQ6LQM.js";import{t as u}from"./Button-DkdaDkuf.js";import{t as d}from"./SectionShell-BEISUYi8.js";import{t as f}from"./Card-DM27vc3f.js";var p={class:`eyebrow mb-5`},m={class:`flex flex-wrap gap-3`},h={class:`eyebrow mb-5`},g={class:`grid md:grid-cols-3 gap-4`},_={class:`eyebrow mb-4`},v={class:`flex flex-wrap gap-3`},y={class:`eyebrow mb-4`},b={class:`flex flex-wrap gap-3`},x={class:`eyebrow mb-4 !text-cream opacity-80`},S={class:`flex flex-wrap gap-3`},C={class:`eyebrow mb-5`},w={class:`flex flex-wrap items-center gap-3`},T={class:`eyebrow mb-5`},E={class:`flex flex-wrap items-center gap-3`},D={class:`eyebrow mb-5`},O={class:`flex flex-wrap gap-3 items-center`},k={class:`eyebrow mb-5`},A={class:`max-w-md space-y-3`},j={class:`eyebrow mb-5`},M={class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},N={class:`whitespace-pre-wrap`},P={__name:`ButtonsSection`,setup(P){let{t:F}=l();return(l,P)=>(e(),n(d,{eyebrow:t(F)(`ds.eyebrow.components`),title:t(F)(`ds.buttons.title`),description:t(F)(`ds.buttons.description`)},{default:r(()=>[s(`section`,null,[s(`h2`,p,i(t(F)(`ds.heading.variants`)),1),a(f,{tone:`paper`},{default:r(()=>[s(`div`,m,[a(u,{variant:`primary`},{default:r(()=>[o(i(t(F)(`ds.buttons.primary`)),1)]),_:1}),a(u,{variant:`accent`},{default:r(()=>[o(i(t(F)(`ds.buttons.accent`)),1)]),_:1}),a(u,{variant:`secondary`},{default:r(()=>[o(i(t(F)(`ds.buttons.secondary`)),1)]),_:1}),a(u,{variant:`ghost`},{default:r(()=>[o(i(t(F)(`ds.buttons.ghost`)),1)]),_:1}),a(u,{variant:`danger`},{default:r(()=>[o(i(t(F)(`ds.buttons.danger`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,h,i(t(F)(`ds.heading.onDifferentSurfaces`)),1),s(`div`,g,[a(f,{tone:`paper`},{default:r(()=>[s(`p`,_,i(t(F)(`ds.cards.paper`)),1),s(`div`,v,[a(u,{variant:`primary`},{before:r(()=>[a(c,{name:`cart`,size:18})]),default:r(()=>[o(` `+i(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`},{default:r(()=>[o(i(t(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1}),a(f,{tone:`cream`},{default:r(()=>[s(`p`,y,i(t(F)(`ds.cards.cream`)),1),s(`div`,b,[a(u,{variant:`primary`},{before:r(()=>[a(c,{name:`cart`,size:18})]),default:r(()=>[o(` `+i(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`},{default:r(()=>[o(i(t(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1}),a(f,{tone:`brand`},{default:r(()=>[s(`p`,x,i(t(F)(`ds.cards.brand`)),1),s(`div`,S,[a(u,{variant:`accent`},{before:r(()=>[a(c,{name:`cart`,size:18})]),default:r(()=>[o(` `+i(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`,class:`!text-cream hover:!bg-cream-wash`},{default:r(()=>[o(i(t(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1})])]),s(`section`,null,[s(`h2`,C,i(t(F)(`ds.heading.sizes`)),1),a(f,{tone:`paper`},{default:r(()=>[s(`div`,w,[a(u,{size:`sm`},{default:r(()=>[o(i(t(F)(`ds.buttons.small`)),1)]),_:1}),a(u,{size:`md`},{default:r(()=>[o(i(t(F)(`ds.buttons.medium`)),1)]),_:1}),a(u,{size:`lg`},{default:r(()=>[o(i(t(F)(`ds.buttons.large`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,T,i(t(F)(`ds.heading.withIcons`)),1),a(f,{tone:`paper`},{default:r(()=>[s(`div`,E,[a(u,{variant:`primary`},{before:r(()=>[a(c,{name:`cart`,size:18})]),default:r(()=>[o(` `+i(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`secondary`},{after:r(()=>[a(c,{name:`arrow-right`,size:18})]),default:r(()=>[o(i(t(F)(`ds.buttons.learnMore`))+` `,1)]),_:1}),a(u,{variant:`ghost`},{before:r(()=>[a(c,{name:`heart`,size:18})]),default:r(()=>[o(` `+i(t(F)(`ds.buttons.save`)),1)]),_:1}),a(u,{variant:`accent`,size:`sm`},{before:r(()=>[a(c,{name:`check`,size:16})]),default:r(()=>[o(` `+i(t(F)(`ds.buttons.confirm`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,D,i(t(F)(`ds.heading.states`)),1),a(f,{tone:`paper`},{default:r(()=>[s(`div`,O,[a(u,null,{default:r(()=>[o(i(t(F)(`ds.heading.default`)),1)]),_:1}),a(u,{disabled:``},{default:r(()=>[o(i(t(F)(`ds.buttons.disabled`)),1)]),_:1}),a(u,{loading:``},{default:r(()=>[o(i(t(F)(`ds.buttons.loading`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,k,i(t(F)(`ds.heading.block`)),1),a(f,{tone:`paper`},{default:r(()=>[s(`div`,A,[a(u,{block:``,variant:`primary`},{before:r(()=>[a(c,{name:`cart`,size:18})]),default:r(()=>[o(` `+i(t(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{block:``,variant:`secondary`},{default:r(()=>[o(i(t(F)(`ds.buttons.continueShopping`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,j,i(t(F)(`ds.heading.usage`)),1),s(`div`,M,[s(`pre`,N,`<Button variant="primary" size="md">
+  <template #before><Icon name="cart" :size="18" /></template>
+  `+i(t(F)(`ds.buttons.addToCart`))+`
+</Button>`,1)])])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{P as default};

dist/assets/ButtonsSection-DKw99nc6.js

@@ -1,4 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,m as a,p as o,s}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as c}from"./Icon-D1Ud4H_f.js";import{t as l}from"./i18n-BxXwPz8H.js";import{t as u}from"./Button-CajVMpo0.js";import{t as d}from"./SectionShell-CHsfR9Y3.js";import{t as f}from"./Card-BhcSEJNV.js";var p={class:`eyebrow mb-5`},m={class:`flex flex-wrap gap-3`},h={class:`eyebrow mb-5`},g={class:`grid md:grid-cols-3 gap-4`},_={class:`eyebrow mb-4`},v={class:`flex flex-wrap gap-3`},y={class:`eyebrow mb-4`},b={class:`flex flex-wrap gap-3`},x={class:`eyebrow mb-4 !text-cream opacity-80`},S={class:`flex flex-wrap gap-3`},C={class:`eyebrow mb-5`},w={class:`flex flex-wrap items-center gap-3`},T={class:`eyebrow mb-5`},E={class:`flex flex-wrap items-center gap-3`},D={class:`eyebrow mb-5`},O={class:`flex flex-wrap gap-3 items-center`},k={class:`eyebrow mb-5`},A={class:`max-w-md space-y-3`},j={class:`eyebrow mb-5`},M={class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},N={class:`whitespace-pre-wrap`},P={__name:`ButtonsSection`,setup(P){let{t:F}=l();return(l,P)=>(t(),r(d,{eyebrow:n(F)(`ds.eyebrow.components`),title:n(F)(`ds.buttons.title`),description:n(F)(`ds.buttons.description`)},{default:e(()=>[s(`section`,null,[s(`h2`,p,i(n(F)(`ds.heading.variants`)),1),a(f,{tone:`paper`},{default:e(()=>[s(`div`,m,[a(u,{variant:`primary`},{default:e(()=>[o(i(n(F)(`ds.buttons.primary`)),1)]),_:1}),a(u,{variant:`accent`},{default:e(()=>[o(i(n(F)(`ds.buttons.accent`)),1)]),_:1}),a(u,{variant:`secondary`},{default:e(()=>[o(i(n(F)(`ds.buttons.secondary`)),1)]),_:1}),a(u,{variant:`ghost`},{default:e(()=>[o(i(n(F)(`ds.buttons.ghost`)),1)]),_:1}),a(u,{variant:`danger`},{default:e(()=>[o(i(n(F)(`ds.buttons.danger`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,h,i(n(F)(`ds.heading.onDifferentSurfaces`)),1),s(`div`,g,[a(f,{tone:`paper`},{default:e(()=>[s(`p`,_,i(n(F)(`ds.cards.paper`)),1),s(`div`,v,[a(u,{variant:`primary`},{before:e(()=>[a(c,{name:`cart`,size:18})]),default:e(()=>[o(` `+i(n(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`},{default:e(()=>[o(i(n(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1}),a(f,{tone:`cream`},{default:e(()=>[s(`p`,y,i(n(F)(`ds.cards.cream`)),1),s(`div`,b,[a(u,{variant:`primary`},{before:e(()=>[a(c,{name:`cart`,size:18})]),default:e(()=>[o(` `+i(n(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`},{default:e(()=>[o(i(n(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1}),a(f,{tone:`brand`},{default:e(()=>[s(`p`,x,i(n(F)(`ds.cards.brand`)),1),s(`div`,S,[a(u,{variant:`accent`},{before:e(()=>[a(c,{name:`cart`,size:18})]),default:e(()=>[o(` `+i(n(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`ghost`,class:`!text-cream hover:!bg-cream-wash`},{default:e(()=>[o(i(n(F)(`ds.buttons.learnMore`)),1)]),_:1})])]),_:1})])]),s(`section`,null,[s(`h2`,C,i(n(F)(`ds.heading.sizes`)),1),a(f,{tone:`paper`},{default:e(()=>[s(`div`,w,[a(u,{size:`sm`},{default:e(()=>[o(i(n(F)(`ds.buttons.small`)),1)]),_:1}),a(u,{size:`md`},{default:e(()=>[o(i(n(F)(`ds.buttons.medium`)),1)]),_:1}),a(u,{size:`lg`},{default:e(()=>[o(i(n(F)(`ds.buttons.large`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,T,i(n(F)(`ds.heading.withIcons`)),1),a(f,{tone:`paper`},{default:e(()=>[s(`div`,E,[a(u,{variant:`primary`},{before:e(()=>[a(c,{name:`cart`,size:18})]),default:e(()=>[o(` `+i(n(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{variant:`secondary`},{after:e(()=>[a(c,{name:`arrow-right`,size:18})]),default:e(()=>[o(i(n(F)(`ds.buttons.learnMore`))+` `,1)]),_:1}),a(u,{variant:`ghost`},{before:e(()=>[a(c,{name:`heart`,size:18})]),default:e(()=>[o(` `+i(n(F)(`ds.buttons.save`)),1)]),_:1}),a(u,{variant:`accent`,size:`sm`},{before:e(()=>[a(c,{name:`check`,size:16})]),default:e(()=>[o(` `+i(n(F)(`ds.buttons.confirm`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,D,i(n(F)(`ds.heading.states`)),1),a(f,{tone:`paper`},{default:e(()=>[s(`div`,O,[a(u,null,{default:e(()=>[o(i(n(F)(`ds.heading.default`)),1)]),_:1}),a(u,{disabled:``},{default:e(()=>[o(i(n(F)(`ds.buttons.disabled`)),1)]),_:1}),a(u,{loading:``},{default:e(()=>[o(i(n(F)(`ds.buttons.loading`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,k,i(n(F)(`ds.heading.block`)),1),a(f,{tone:`paper`},{default:e(()=>[s(`div`,A,[a(u,{block:``,variant:`primary`},{before:e(()=>[a(c,{name:`cart`,size:18})]),default:e(()=>[o(` `+i(n(F)(`ds.buttons.addToCart`)),1)]),_:1}),a(u,{block:``,variant:`secondary`},{default:e(()=>[o(i(n(F)(`ds.buttons.continueShopping`)),1)]),_:1})])]),_:1})]),s(`section`,null,[s(`h2`,j,i(n(F)(`ds.heading.usage`)),1),s(`div`,M,[s(`pre`,N,`<Button variant="primary" size="md">
-  <template #before><Icon name="cart" :size="18" /></template>
-  `+i(n(F)(`ds.buttons.addToCart`))+`
-</Button>`,1)])])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{P as default};

dist/assets/Card-DM27vc3f.js

@@ -1 +1 @@
-import{S as e,T as t,ot as n,u as r}from"./runtime-core.esm-bundler-DgkFZzbt.js";var i={__name:`Card`,props:{padded:{type:Boolean,default:!0},interactive:{type:Boolean,default:!1},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`,`brand`].includes(e)}},setup(i){let a={paper:`bg-paper text-ink border-line`,cream:`bg-cream text-ink border-line`,brand:`bg-brand text-accent border-transparent`};return(o,s)=>(e(),r(`div`,{class:n([`rounded-md border`,[a[i.tone],i.padded?`p-7`:``,i.interactive?`transition-all duration-base ease-out hover:-translate-y-1 hover:shadow-md hover:border-brand-soft cursor-pointer`:``]])},[t(o.$slots,`default`)],2))}};export{i as t};
+import{C as e,E as t,st as n,u as r}from"./runtime-core.esm-bundler-BD0e4RlP.js";var i={__name:`Card`,props:{padded:{type:Boolean,default:!0},interactive:{type:Boolean,default:!1},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`,`brand`].includes(e)}},setup(i){let a={paper:`bg-paper text-ink border-line`,cream:`bg-cream text-ink border-line`,brand:`bg-brand text-accent border-transparent`};return(o,s)=>(e(),r(`div`,{class:n([`rounded-md border`,[a[i.tone],i.padded?`p-7`:``,i.interactive?`transition-all duration-base ease-out hover:-translate-y-1 hover:shadow-md hover:border-brand-soft cursor-pointer`:``]])},[t(o.$slots,`default`)],2))}};export{i as t};

dist/assets/CardsSection-DpEvbOdv.js

@@ -1 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,m as a,p as o,s}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as c}from"./i18n-BxXwPz8H.js";import{t as l}from"./Badge-D2T2EdKQ.js";import{t as u}from"./SectionShell-CHsfR9Y3.js";import{t as d}from"./Card-BhcSEJNV.js";var f={class:`eyebrow mb-5`},p={class:`grid md:grid-cols-3 gap-6`},m={class:`font-display text-2xl font-normal mb-2`},h={class:`text-[14px] text-muted leading-relaxed`},g={class:`font-display text-2xl font-normal mb-2`},_={class:`text-[14px] text-muted leading-relaxed`},v={class:`font-display text-2xl font-normal mb-2`},y={class:`text-[14px] opacity-80 leading-relaxed`},b={class:`eyebrow mb-5`},x={class:`grid md:grid-cols-2 gap-6`},S={class:`font-display text-2xl font-normal mb-2`},C={class:`text-[14px] text-muted leading-relaxed`},w={class:`font-display text-2xl font-normal mb-2`},T={class:`text-[14px] text-muted leading-relaxed`},E={class:`eyebrow mb-5`},D={class:`p-7`},O={class:`font-display text-2xl font-normal mb-2`},k={class:`text-[14px] text-muted leading-relaxed`},A={__name:`CardsSection`,setup(A){let{t:j}=c();return(c,A)=>(t(),r(u,{eyebrow:n(j)(`ds.eyebrow.components`),title:n(j)(`ds.cards.title`),description:n(j)(`ds.cards.description`)},{default:e(()=>[s(`section`,null,[s(`h2`,f,i(n(j)(`ds.heading.tones`)),1),s(`div`,p,[a(d,{tone:`paper`},{default:e(()=>[a(l,{variant:`subtle`,class:`mb-4`},{default:e(()=>[o(i(n(j)(`ds.cards.paper`)),1)]),_:1}),s(`h3`,m,i(n(j)(`ds.cards.paperTitle`)),1),s(`p`,h,i(n(j)(`ds.cards.paperBody`)),1)]),_:1}),a(d,{tone:`cream`},{default:e(()=>[a(l,{variant:`subtle`,class:`mb-4`},{default:e(()=>[o(i(n(j)(`ds.cards.cream`)),1)]),_:1}),s(`h3`,g,i(n(j)(`ds.cards.creamTitle`)),1),s(`p`,_,i(n(j)(`ds.cards.creamBody`)),1)]),_:1}),a(d,{tone:`brand`},{default:e(()=>[a(l,{variant:`accent`,class:`mb-4`},{default:e(()=>[o(i(n(j)(`ds.cards.brand`)),1)]),_:1}),s(`h3`,v,i(n(j)(`ds.cards.brandTitle`)),1),s(`p`,y,i(n(j)(`ds.cards.brandBody`)),1)]),_:1})])]),s(`section`,null,[s(`h2`,b,i(n(j)(`ds.heading.interactive`)),1),s(`div`,x,[a(d,{tone:`paper`,interactive:``},{default:e(()=>[s(`h3`,S,i(n(j)(`ds.cards.hoverMe`)),1),s(`p`,C,i(n(j)(`ds.cards.hoverBody`)),1)]),_:1}),a(d,{tone:`cream`,interactive:``},{default:e(()=>[s(`h3`,w,i(n(j)(`ds.cards.hoverMeToo`)),1),s(`p`,T,i(n(j)(`ds.cards.hoverBodyAlt`)),1)]),_:1})])]),s(`section`,null,[s(`h2`,E,i(n(j)(`ds.heading.withoutPadding`)),1),a(d,{tone:`paper`,padded:!1},{default:e(()=>[A[2]||=s(`div`,{class:`h-40 bg-cream rounded-t-md`},null,-1),s(`div`,D,[s(`h3`,O,i(n(j)(`ds.cards.mediaTitle`)),1),s(`p`,k,[o(i(n(j)(`ds.cards.mediaBody`))+` `,1),A[0]||=s(`code`,{class:`font-mono text-[12px]`},`:padded="false"`,-1),A[1]||=o(`. `,-1)])])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{A as default};

dist/assets/CardsSection-Dq0mVES3.js

@@ -0,0 +1 @@
+import{C as e,G as t,c as n,j as r,lt as i,m as a,p as o,s}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as c}from"./i18n-C5xQ6LQM.js";import{t as l}from"./Badge-DcvgVKep.js";import{t as u}from"./SectionShell-BEISUYi8.js";import{t as d}from"./Card-DM27vc3f.js";var f={class:`eyebrow mb-5`},p={class:`grid md:grid-cols-3 gap-6`},m={class:`font-display text-2xl font-normal mb-2`},h={class:`text-[14px] text-muted leading-relaxed`},g={class:`font-display text-2xl font-normal mb-2`},_={class:`text-[14px] text-muted leading-relaxed`},v={class:`font-display text-2xl font-normal mb-2`},y={class:`text-[14px] opacity-80 leading-relaxed`},b={class:`eyebrow mb-5`},x={class:`grid md:grid-cols-2 gap-6`},S={class:`font-display text-2xl font-normal mb-2`},C={class:`text-[14px] text-muted leading-relaxed`},w={class:`font-display text-2xl font-normal mb-2`},T={class:`text-[14px] text-muted leading-relaxed`},E={class:`eyebrow mb-5`},D={class:`p-7`},O={class:`font-display text-2xl font-normal mb-2`},k={class:`text-[14px] text-muted leading-relaxed`},A={__name:`CardsSection`,setup(A){let{t:j}=c();return(c,A)=>(e(),n(u,{eyebrow:t(j)(`ds.eyebrow.components`),title:t(j)(`ds.cards.title`),description:t(j)(`ds.cards.description`)},{default:r(()=>[s(`section`,null,[s(`h2`,f,i(t(j)(`ds.heading.tones`)),1),s(`div`,p,[a(d,{tone:`paper`},{default:r(()=>[a(l,{variant:`subtle`,class:`mb-4`},{default:r(()=>[o(i(t(j)(`ds.cards.paper`)),1)]),_:1}),s(`h3`,m,i(t(j)(`ds.cards.paperTitle`)),1),s(`p`,h,i(t(j)(`ds.cards.paperBody`)),1)]),_:1}),a(d,{tone:`cream`},{default:r(()=>[a(l,{variant:`subtle`,class:`mb-4`},{default:r(()=>[o(i(t(j)(`ds.cards.cream`)),1)]),_:1}),s(`h3`,g,i(t(j)(`ds.cards.creamTitle`)),1),s(`p`,_,i(t(j)(`ds.cards.creamBody`)),1)]),_:1}),a(d,{tone:`brand`},{default:r(()=>[a(l,{variant:`accent`,class:`mb-4`},{default:r(()=>[o(i(t(j)(`ds.cards.brand`)),1)]),_:1}),s(`h3`,v,i(t(j)(`ds.cards.brandTitle`)),1),s(`p`,y,i(t(j)(`ds.cards.brandBody`)),1)]),_:1})])]),s(`section`,null,[s(`h2`,b,i(t(j)(`ds.heading.interactive`)),1),s(`div`,x,[a(d,{tone:`paper`,interactive:``},{default:r(()=>[s(`h3`,S,i(t(j)(`ds.cards.hoverMe`)),1),s(`p`,C,i(t(j)(`ds.cards.hoverBody`)),1)]),_:1}),a(d,{tone:`cream`,interactive:``},{default:r(()=>[s(`h3`,w,i(t(j)(`ds.cards.hoverMeToo`)),1),s(`p`,T,i(t(j)(`ds.cards.hoverBodyAlt`)),1)]),_:1})])]),s(`section`,null,[s(`h2`,E,i(t(j)(`ds.heading.withoutPadding`)),1),a(d,{tone:`paper`,padded:!1},{default:r(()=>[A[2]||=s(`div`,{class:`h-40 bg-cream rounded-t-md`},null,-1),s(`div`,D,[s(`h3`,O,i(t(j)(`ds.cards.mediaTitle`)),1),s(`p`,k,[o(i(t(j)(`ds.cards.mediaBody`))+` `,1),A[0]||=s(`code`,{class:`font-mono text-[12px]`},`:padded="false"`,-1),A[1]||=o(`. `,-1)])])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{A as default};

dist/assets/CartDrawerSection-D5P_Fwt8.js

@@ -1,20 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,m as a,p as o,s,x as c,z as l}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as u}from"./Icon-D1Ud4H_f.js";import{t as d}from"./i18n-BxXwPz8H.js";import{a as f,i as p,n as m,o as h,r as g,t as _}from"./api-BC2UGBdg.js";import{t as v}from"./Button-CajVMpo0.js";import{t as y}from"./CartDrawer-BZqK1kPc.js";import{t as b}from"./SectionShell-CHsfR9Y3.js";var x={class:`eyebrow mb-5`},S={class:`rounded-md border border-line bg-paper p-6 flex flex-col sm:flex-row sm:items-center gap-4`},C={class:`text-[13px] text-muted`},w={class:`eyebrow mb-5`},T={class:`text-[15px] text-muted leading-relaxed mb-4 max-w-2xl`},E={class:`eyebrow mb-5`},D={__name:`CartDrawerSection`,setup(D){let{t:O}=d(),k=h(),A=l(!1);async function j(){await m(),await _(`kaiser-natron-pulver-250-g-grosspackung`,2),await _(`kaiser-natron-bad-500-g`,1),A.value=!0}async function M({productId:e,quantity:t}){await f(e,t)}async function N(e){await p(e)}return c(()=>{g()}),(c,l)=>(t(),r(b,{eyebrow:n(O)(`ds.eyebrow.components`),title:n(O)(`ds.cartDrawer.title`),description:n(O)(`ds.cartDrawer.description`)},{default:e(()=>[s(`section`,null,[s(`h2`,x,i(n(O)(`ds.heading.default`)),1),s(`div`,S,[a(v,{variant:`primary`,onClick:j},{before:e(()=>[a(u,{name:`cart`,size:18})]),default:e(()=>[o(` `+i(n(O)(`ds.cartDrawer.demoLabel`)),1)]),_:1}),s(`p`,C,i(n(O)(`ds.cartDrawer.demoHint`)),1)])]),s(`section`,null,[s(`h2`,w,i(n(O)(`ds.cartDrawer.integrationTitle`)),1),s(`p`,T,i(n(O)(`ds.cartDrawer.integrationBody`)),1),l[2]||=s(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[s(`pre`,{class:`whitespace-pre-wrap`},`import {
-  fetchCart,
-  addToCart,
-  updateCartItem,
-  removeFromCart,
-  clearCart,
-} from '@/api/index.js'
-
-await addToCart('kaiser-natron-pulver-250-g-grosspackung', 1)
-await updateCartItem('kaiser-natron-bad-500-g', 3)
-await removeFromCart('kaiser-natron-bad-500-g')
-const cart = await fetchCart()`)],-1)]),s(`section`,null,[s(`h2`,E,i(n(O)(`ds.heading.usage`)),1),l[3]||=s(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[s(`pre`,{class:`whitespace-pre-wrap`},`<CartDrawer
-  v-model="open"
-  :items="cart.items"
-  :subtotal="cart.subtotal"
-  :count="cart.count"
-  @update-quantity="onQty"
-  @remove="onRemove"
-  @checkout="goToCheckout"
-/>`)],-1)]),a(y,{modelValue:A.value,"onUpdate:modelValue":l[0]||=e=>A.value=e,items:n(k).items,subtotal:n(k).subtotal,count:n(k).count,onUpdateQuantity:M,onRemove:N,onCheckout:l[1]||=e=>A.value=!1},null,8,[`modelValue`,`items`,`subtotal`,`count`])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{D as default};

dist/assets/CartDrawerSection-DqY3eu2o.js

@@ -0,0 +1,20 @@
+import{B as e,C as t,G as n,S as r,c as i,j as a,lt as o,m as s,p as c,s as l}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as u}from"./Icon-BCRRMV3J.js";import{t as d}from"./i18n-C5xQ6LQM.js";import{a as f,i as p,n as m,o as h,r as g,t as _}from"./api-USrZCulT.js";import{t as v}from"./Button-DkdaDkuf.js";import{t as y}from"./CartDrawer-BpxEh6WV.js";import{t as b}from"./SectionShell-BEISUYi8.js";var x={class:`eyebrow mb-5`},S={class:`rounded-md border border-line bg-paper p-6 flex flex-col sm:flex-row sm:items-center gap-4`},C={class:`text-[13px] text-muted`},w={class:`eyebrow mb-5`},T={class:`text-[15px] text-muted leading-relaxed mb-4 max-w-2xl`},E={class:`eyebrow mb-5`},D={__name:`CartDrawerSection`,setup(D){let{t:O}=d(),k=h(),A=e(!1);async function j(){await m(),await _(`kaiser-natron-pulver-250-g-grosspackung`,2),await _(`kaiser-natron-bad-500-g`,1),A.value=!0}async function M({productId:e,quantity:t}){await f(e,t)}async function N(e){await p(e)}return r(()=>{g()}),(e,r)=>(t(),i(b,{eyebrow:n(O)(`ds.eyebrow.components`),title:n(O)(`ds.cartDrawer.title`),description:n(O)(`ds.cartDrawer.description`)},{default:a(()=>[l(`section`,null,[l(`h2`,x,o(n(O)(`ds.heading.default`)),1),l(`div`,S,[s(v,{variant:`primary`,onClick:j},{before:a(()=>[s(u,{name:`cart`,size:18})]),default:a(()=>[c(` `+o(n(O)(`ds.cartDrawer.demoLabel`)),1)]),_:1}),l(`p`,C,o(n(O)(`ds.cartDrawer.demoHint`)),1)])]),l(`section`,null,[l(`h2`,w,o(n(O)(`ds.cartDrawer.integrationTitle`)),1),l(`p`,T,o(n(O)(`ds.cartDrawer.integrationBody`)),1),r[2]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`import {
+  fetchCart,
+  addToCart,
+  updateCartItem,
+  removeFromCart,
+  clearCart,
+} from '@/api/index.js'
+
+await addToCart('kaiser-natron-pulver-250-g-grosspackung', 1)
+await updateCartItem('kaiser-natron-bad-500-g', 3)
+await removeFromCart('kaiser-natron-bad-500-g')
+const cart = await fetchCart()`)],-1)]),l(`section`,null,[l(`h2`,E,o(n(O)(`ds.heading.usage`)),1),r[3]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`<CartDrawer
+  v-model="open"
+  :items="cart.items"
+  :subtotal="cart.subtotal"
+  :count="cart.count"
+  @update-quantity="onQty"
+  @remove="onRemove"
+  @checkout="goToCheckout"
+/>`)],-1)]),s(y,{modelValue:A.value,"onUpdate:modelValue":r[0]||=e=>A.value=e,items:n(k).items,subtotal:n(k).subtotal,count:n(k).count,onUpdateQuantity:M,onRemove:N,onCheckout:r[1]||=e=>A.value=!1},null,8,[`modelValue`,`items`,`subtotal`,`count`])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{D as default};

dist/assets/ColorsSection-BP0stYUp.js

@@ -0,0 +1 @@
+import{C as e,G as t,T as n,c as r,ct as i,j as a,lt as o,o as s,r as c,s as l,u}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as d}from"./i18n-C5xQ6LQM.js";import{t as f}from"./SectionShell-BEISUYi8.js";var p={class:`eyebrow mb-5`},m={class:`grid grid-cols-2 sm:grid-cols-3 gap-4`},h={class:`px-4 py-3`},g={class:`font-mono text-[12px] text-ink block`},_={__name:`ColorsSection`,setup(_){let{t:v}=d(),y=s(()=>[{title:v(`ds.colors.group.brand`),names:[`brand`,`brand-hover`,`brand-soft`]},{title:v(`ds.colors.group.accent`),names:[`accent`,`accent-soft`,`accent-ink`]},{title:v(`ds.colors.group.surface`),names:[`surface`,`paper`,`cream`]},{title:v(`ds.colors.group.ink`),names:[`ink`,`muted`]},{title:v(`ds.colors.group.line`),names:[`line`,`line-strong`]},{title:v(`ds.colors.group.semantic`),names:[`success`,`warning`,`danger`]}]);return(s,d)=>(e(),r(f,{eyebrow:t(v)(`ds.eyebrow.tokens`),title:t(v)(`ds.colors.title`),description:t(v)(`ds.colors.description`)},{default:a(()=>[(e(!0),u(c,null,n(y.value,t=>(e(),u(`section`,{key:t.title},[l(`h2`,p,o(t.title),1),l(`div`,m,[(e(!0),u(c,null,n(t.names,t=>(e(),u(`div`,{key:t,class:`rounded-md border border-line overflow-hidden bg-paper`},[l(`div`,{class:`h-28 border-b border-line`,style:i({background:`var(--color-${t})`})},null,4),l(`div`,h,[l(`code`,g,`--color-`+o(t),1)])]))),128))])]))),128))]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{_ as default};

dist/assets/ColorsSection-DVVBcMbw.js

@@ -1 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,o as a,r as o,s,st as c,u as l,w as u}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as d}from"./i18n-BxXwPz8H.js";import{t as f}from"./SectionShell-CHsfR9Y3.js";var p={class:`eyebrow mb-5`},m={class:`grid grid-cols-2 sm:grid-cols-3 gap-4`},h={class:`px-4 py-3`},g={class:`font-mono text-[12px] text-ink block`},_={__name:`ColorsSection`,setup(_){let{t:v}=d(),y=a(()=>[{title:v(`ds.colors.group.brand`),names:[`brand`,`brand-hover`,`brand-soft`]},{title:v(`ds.colors.group.accent`),names:[`accent`,`accent-soft`,`accent-ink`]},{title:v(`ds.colors.group.surface`),names:[`surface`,`paper`,`cream`]},{title:v(`ds.colors.group.ink`),names:[`ink`,`muted`]},{title:v(`ds.colors.group.line`),names:[`line`,`line-strong`]},{title:v(`ds.colors.group.semantic`),names:[`success`,`warning`,`danger`]}]);return(a,d)=>(t(),r(f,{eyebrow:n(v)(`ds.eyebrow.tokens`),title:n(v)(`ds.colors.title`),description:n(v)(`ds.colors.description`)},{default:e(()=>[(t(!0),l(o,null,u(y.value,e=>(t(),l(`section`,{key:e.title},[s(`h2`,p,i(e.title),1),s(`div`,m,[(t(!0),l(o,null,u(e.names,e=>(t(),l(`div`,{key:e,class:`rounded-md border border-line overflow-hidden bg-paper`},[s(`div`,{class:`h-28 border-b border-line`,style:c({background:`var(--color-${e})`})},null,4),s(`div`,h,[s(`code`,g,`--color-`+i(e),1)])]))),128))])]))),128))]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{_ as default};

dist/assets/DesignLayout-Dk4c9E0S.css

@@ -1 +0,0 @@
-.ds-sheet-enter-active[data-v-aeff6577],.ds-sheet-leave-active[data-v-aeff6577]{transition:transform .26s}.ds-sheet-enter-from[data-v-aeff6577],.ds-sheet-leave-to[data-v-aeff6577]{transform:translateY(100%)}.ds-backdrop-enter-active[data-v-aeff6577],.ds-backdrop-leave-active[data-v-aeff6577]{transition:opacity .2s}.ds-backdrop-enter-from[data-v-aeff6577],.ds-backdrop-leave-to[data-v-aeff6577]{opacity:0}

dist/assets/DesignLayout-LO9GkkNc.css

@@ -0,0 +1 @@
+.ds-sheet-enter-active[data-v-3bd48a81],.ds-sheet-leave-active[data-v-3bd48a81]{transition:transform .26s}.ds-sheet-enter-from[data-v-3bd48a81],.ds-sheet-leave-to[data-v-3bd48a81]{transform:translateY(100%)}.ds-backdrop-enter-active[data-v-3bd48a81],.ds-backdrop-leave-active[data-v-3bd48a81]{transition:opacity .2s}.ds-backdrop-enter-from[data-v-3bd48a81],.ds-backdrop-leave-to[data-v-3bd48a81]{opacity:0}

dist/assets/DevicePreview-Dj1SP-lv.js

@@ -1 +0,0 @@
-import{S as e,T as t,ct as n,m as r,o as i,ot as a,p as o,r as s,s as c,st as l,u,w as d,z as f}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as p}from"./Icon-D1Ud4H_f.js";var m={class:`flex items-center gap-3 mb-4 flex-wrap`},h={role:`tablist`,"aria-label":`Preview viewport`,class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper ml-auto`},g=[`aria-selected`,`onClick`],_={class:`rounded-md border border-line bg-surface p-6 overflow-x-auto`},v=[`src`,`title`],y={class:`mt-2 text-center font-mono text-[11px] text-muted`},b={__name:`DevicePreview`,props:{src:{type:String,required:!0},initial:{type:String,default:`desktop`,validator:e=>[`mobile`,`tablet`,`desktop`].includes(e)},height:{type:Number,default:560}},setup(b){let x=b,S=[{id:`mobile`,label:`Mobile`,width:390},{id:`tablet`,label:`Tablet`,width:820},{id:`desktop`,label:`Desktop`,width:1280}],C=f(x.initial),w=i(()=>S.find(e=>e.id===C.value));return(i,f)=>(e(),u(`div`,null,[c(`div`,m,[t(i.$slots,`controls`),c(`div`,h,[(e(),u(s,null,d(S,e=>c(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":C.value===e.id,class:a([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,C.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>C.value=e.id},[r(p,{name:e.id,size:14},null,8,[`name`]),o(` `+n(e.label),1)],10,g)),64))])]),c(`div`,_,[c(`div`,{class:`mx-auto transition-[width] duration-base ease-out`,style:l({width:w.value.width+`px`})},[c(`iframe`,{src:b.src,title:`${w.value.label} preview`,style:l({height:b.height+`px`}),class:`w-full block rounded-sm border border-line bg-paper`,loading:`lazy`},null,12,v),c(`p`,y,n(w.value.width)+`px `,1)],4)])]))}};export{b as t};

dist/assets/DevicePreview-DvIWByfU.js

@@ -0,0 +1 @@
+import{B as e,C as t,E as n,T as r,ct as i,lt as a,m as o,o as s,p as c,r as l,s as u,st as d,u as f}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as p}from"./Icon-BCRRMV3J.js";var m={class:`flex items-center gap-3 mb-4 flex-wrap`},h={role:`tablist`,"aria-label":`Preview viewport`,class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper ml-auto`},g=[`aria-selected`,`onClick`],_={class:`rounded-md border border-line bg-surface p-6 overflow-x-auto`},v=[`src`,`title`],y={class:`mt-2 text-center font-mono text-[11px] text-muted`},b={__name:`DevicePreview`,props:{src:{type:String,required:!0},initial:{type:String,default:`desktop`,validator:e=>[`mobile`,`tablet`,`desktop`].includes(e)},height:{type:Number,default:560}},setup(b){let x=b,S=[{id:`mobile`,label:`Mobile`,width:390},{id:`tablet`,label:`Tablet`,width:820},{id:`desktop`,label:`Desktop`,width:1280}],C=e(x.initial),w=s(()=>S.find(e=>e.id===C.value));return(e,s)=>(t(),f(`div`,null,[u(`div`,m,[n(e.$slots,`controls`),u(`div`,h,[(t(),f(l,null,r(S,e=>u(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":C.value===e.id,class:d([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,C.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>C.value=e.id},[o(p,{name:e.id,size:14},null,8,[`name`]),c(` `+a(e.label),1)],10,g)),64))])]),u(`div`,_,[u(`div`,{class:`mx-auto transition-[width] duration-base ease-out`,style:i({width:w.value.width+`px`})},[u(`iframe`,{src:b.src,title:`${w.value.label} preview`,style:i({height:b.height+`px`}),class:`w-full block rounded-sm border border-line bg-paper`,loading:`lazy`},null,12,v),u(`p`,y,a(w.value.width)+`px `,1)],4)])]))}};export{b as t};

dist/assets/HeroPreview-BcL9wz2_.js

@@ -1 +0,0 @@
-import{A as e,S as t,W as n,ct as r,m as i,o as a,ot as o,p as s,r as c,s as l,u}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{a as d}from"./vue-router-BUTR8NmK.js";import{t as f}from"./i18n-BxXwPz8H.js";import{t as p}from"./Navbar-JEFiizrv.js";import{t as m}from"./Hero-BlnQ4ovQ.js";var h={class:`italic font-light text-brand-soft`},g={class:`italic font-light text-brand-soft`},_=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview-2.png`,v=`/products/kaiser-natron-bad-500-g.jpg`,y={__name:`HeroPreview`,setup(y){let b=d(),{t:x}=f(),S=a(()=>[`split`,`centered`].includes(b.query.variant)?b.query.variant:`split`),C=a(()=>[`cream`,`paper`,`brand`].includes(b.query.tone)?b.query.tone:`cream`),w=a(()=>b.query.reverse===`1`),T=a(()=>C.value===`brand`?`brand`:C.value),E=a(()=>w.value?v:_),D=a(()=>w.value?`Kaiser-Natron Bad 500 g`:`Kaiser-Natron Pulver 250 g Großpackung`);return(a,d)=>(t(),u(`div`,{class:o([`min-h-screen`,C.value===`brand`?`bg-brand`:`bg-surface`])},[i(p,{variant:T.value,"cart-count":0},null,8,[`variant`]),i(m,{variant:S.value,tone:C.value,reverse:w.value,eyebrow:w.value?n(x)(`home.banner.eyebrow`):n(x)(`ds.hero.eyebrow`),subheadline:w.value?n(x)(`home.banner.sub`):n(x)(`ds.hero.sub`),image:E.value,"image-alt":D.value,badge:w.value?``:n(x)(`ds.badges.featured`),"cta-label":n(x)(`ds.buttons.addToCart`),"secondary-label":n(x)(`ds.buttons.learnMore`)},{headline:e(()=>[w.value?(t(),u(c,{key:0},[s(r(n(x)(`home.banner.headline.a`))+` `,1),l(`em`,h,r(n(x)(`home.banner.headline.em`)),1),s(` `+r(n(x)(`home.banner.headline.b`)),1)],64)):(t(),u(c,{key:1},[s(r(n(x)(`ds.hero.headline.a`))+` `,1),l(`em`,g,r(n(x)(`ds.hero.headline.em`)),1),s(` `+r(n(x)(`ds.hero.headline.b`)),1)],64))]),_:1},8,[`variant`,`tone`,`reverse`,`eyebrow`,`subheadline`,`image`,`image-alt`,`badge`,`cta-label`,`secondary-label`])],2))}};export{y as default};

dist/assets/HeroPreview-i8Zye7Z-.js

@@ -0,0 +1 @@
+import{C as e,G as t,j as n,lt as r,m as i,o as a,p as o,r as s,s as c,st as l,u}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{a as d}from"./vue-router-QRVDVSxc.js";import{t as f}from"./i18n-C5xQ6LQM.js";import{t as p}from"./Navbar-CeWNSArx.js";import{t as m}from"./Hero-CtAh3Bgz.js";var h={class:`italic font-light text-brand-soft`},g={class:`italic font-light text-brand-soft`},_=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview-2.png`,v=`/products/kaiser-natron-bad-500-g.jpg`,y={__name:`HeroPreview`,setup(y){let b=d(),{t:x}=f(),S=a(()=>[`split`,`centered`].includes(b.query.variant)?b.query.variant:`split`),C=a(()=>[`cream`,`paper`,`brand`].includes(b.query.tone)?b.query.tone:`cream`),w=a(()=>b.query.reverse===`1`),T=a(()=>C.value===`brand`?`brand`:C.value),E=a(()=>w.value?v:_),D=a(()=>w.value?`Kaiser-Natron Bad 500 g`:`Kaiser-Natron Pulver 250 g Großpackung`);return(a,d)=>(e(),u(`div`,{class:l([`min-h-screen`,C.value===`brand`?`bg-brand`:`bg-surface`])},[i(p,{variant:T.value,"cart-count":0},null,8,[`variant`]),i(m,{variant:S.value,tone:C.value,reverse:w.value,eyebrow:w.value?t(x)(`home.banner.eyebrow`):t(x)(`ds.hero.eyebrow`),subheadline:w.value?t(x)(`home.banner.sub`):t(x)(`ds.hero.sub`),image:E.value,"image-alt":D.value,badge:w.value?``:t(x)(`ds.badges.featured`),"cta-label":t(x)(`ds.buttons.addToCart`),"secondary-label":t(x)(`ds.buttons.learnMore`)},{headline:n(()=>[w.value?(e(),u(s,{key:0},[o(r(t(x)(`home.banner.headline.a`))+` `,1),c(`em`,h,r(t(x)(`home.banner.headline.em`)),1),o(` `+r(t(x)(`home.banner.headline.b`)),1)],64)):(e(),u(s,{key:1},[o(r(t(x)(`ds.hero.headline.a`))+` `,1),c(`em`,g,r(t(x)(`ds.hero.headline.em`)),1),o(` `+r(t(x)(`ds.hero.headline.b`)),1)],64))]),_:1},8,[`variant`,`tone`,`reverse`,`eyebrow`,`subheadline`,`image`,`image-alt`,`badge`,`cta-label`,`secondary-label`])],2))}};export{y as default};

dist/assets/HeroSection-5BNrDG7K.js

@@ -0,0 +1,14 @@
+import{B as e,C as t,G as n,T as r,c as i,ct as a,j as o,lt as s,m as c,o as l,p as u,r as d,s as f,st as p,u as m}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as h}from"./i18n-C5xQ6LQM.js";import{t as g}from"./SectionShell-BEISUYi8.js";import{t as _}from"./DevicePreview-DvIWByfU.js";var v=[`aria-label`],y=[`aria-selected`,`onClick`],b=[`aria-label`],x=[`aria-selected`,`onClick`],S={class:`eyebrow mb-5`},C={__name:`HeroSection`,setup(C){let{t:w}=h(),T=l(()=>[{id:`split`,label:w(`ds.hero.variant.split`)},{id:`centered`,label:w(`ds.hero.variant.centered`)}]),E=l(()=>[{id:`cream`,label:w(`ds.navbar.tone.cream`),swatch:`var(--color-cream)`},{id:`paper`,label:w(`ds.navbar.tone.paper`),swatch:`#ffffff`},{id:`brand`,label:w(`ds.navbar.tone.brand`),swatch:`var(--color-brand)`}]),D=e(`split`),O=e(`cream`),k=l(()=>`/design/preview/hero?variant=${D.value}&tone=${O.value}`);return(e,l)=>(t(),i(g,{eyebrow:n(w)(`ds.eyebrow.components`),title:n(w)(`ds.hero.title`),description:n(w)(`ds.hero.description`),wide:``},{default:o(()=>[f(`section`,null,[c(_,{src:k.value,initial:`desktop`,height:760},{controls:o(()=>[f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.hero.variant.label`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),m(d,null,r(T.value,e=>(t(),m(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":D.value===e.id,class:p([`px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,D.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>D.value=e.id},s(e.label),11,y))),128))],8,v),f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.tone`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),m(d,null,r(E.value,e=>(t(),m(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":O.value===e.id,class:p([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,O.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>O.value=e.id},[f(`span`,{class:`w-2.5 h-2.5 rounded-full border border-line-strong`,style:a({backgroundColor:e.swatch})},null,4),u(` `+s(e.label),1)],10,x))),128))],8,b)]),_:1},8,[`src`])]),f(`section`,null,[f(`h2`,S,s(n(w)(`ds.heading.usage`)),1),l[0]||=f(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[f(`pre`,{class:`whitespace-pre-wrap`},`<Hero
+  variant="split"
+  tone="cream"
+  eyebrow="Neu"
+  headline="Kaiser-Natron Pulver"
+  subheadline="Reinigt. Backt. Neutralisiert."
+  image="/products/cutouts/…-removebg-preview.png"
+  image-alt="Kaiser-Natron Pulver 250 g"
+  badge="Bestseller"
+  cta-label="In den Warenkorb"
+  secondary-label="Mehr erfahren"
+  @cta="addToCart(sku)"
+  @secondary="router.push('/anwendungen')"
+/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{C as default};

dist/assets/HeroSection-DAjSDNmS.js

@@ -1,14 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,m as a,o,ot as s,p as c,r as l,s as u,st as d,u as f,w as p,z as m}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as h}from"./i18n-BxXwPz8H.js";import{t as g}from"./SectionShell-CHsfR9Y3.js";import{t as _}from"./DevicePreview-Dj1SP-lv.js";var v=[`aria-label`],y=[`aria-selected`,`onClick`],b=[`aria-label`],x=[`aria-selected`,`onClick`],S={class:`eyebrow mb-5`},C={__name:`HeroSection`,setup(C){let{t:w}=h(),T=o(()=>[{id:`split`,label:w(`ds.hero.variant.split`)},{id:`centered`,label:w(`ds.hero.variant.centered`)}]),E=o(()=>[{id:`cream`,label:w(`ds.navbar.tone.cream`),swatch:`var(--color-cream)`},{id:`paper`,label:w(`ds.navbar.tone.paper`),swatch:`#ffffff`},{id:`brand`,label:w(`ds.navbar.tone.brand`),swatch:`var(--color-brand)`}]),D=m(`split`),O=m(`cream`),k=o(()=>`/design/preview/hero?variant=${D.value}&tone=${O.value}`);return(o,m)=>(t(),r(g,{eyebrow:n(w)(`ds.eyebrow.components`),title:n(w)(`ds.hero.title`),description:n(w)(`ds.hero.description`),wide:``},{default:e(()=>[u(`section`,null,[a(_,{src:k.value,initial:`desktop`,height:760},{controls:e(()=>[u(`div`,{role:`tablist`,"aria-label":n(w)(`ds.hero.variant.label`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),f(l,null,p(T.value,e=>(t(),f(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":D.value===e.id,class:s([`px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,D.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>D.value=e.id},i(e.label),11,y))),128))],8,v),u(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.tone`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),f(l,null,p(E.value,e=>(t(),f(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":O.value===e.id,class:s([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,O.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>O.value=e.id},[u(`span`,{class:`w-2.5 h-2.5 rounded-full border border-line-strong`,style:d({backgroundColor:e.swatch})},null,4),c(` `+i(e.label),1)],10,x))),128))],8,b)]),_:1},8,[`src`])]),u(`section`,null,[u(`h2`,S,i(n(w)(`ds.heading.usage`)),1),m[0]||=u(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[u(`pre`,{class:`whitespace-pre-wrap`},`<Hero
-  variant="split"
-  tone="cream"
-  eyebrow="Neu"
-  headline="Kaiser-Natron Pulver"
-  subheadline="Reinigt. Backt. Neutralisiert."
-  image="/products/cutouts/…-removebg-preview.png"
-  image-alt="Kaiser-Natron Pulver 250 g"
-  badge="Bestseller"
-  cta-label="In den Warenkorb"
-  secondary-label="Mehr erfahren"
-  @cta="addToCart(sku)"
-  @secondary="router.push('/anwendungen')"
-/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{C as default};

dist/assets/HomePage-19Z2PZby.js

@@ -1 +0,0 @@
-import{A as e,S as t,W as n,ct as r,m as i,p as a,r as o,s,u as c,x as l,z as u}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as d}from"./i18n-BxXwPz8H.js";import{n as f}from"./products-EYsKyD6O.js";import{a as p,i as m,o as h,r as g,t as _}from"./api-BC2UGBdg.js";import{t as v}from"./Navbar-JEFiizrv.js";import{t as y}from"./Hero-BlnQ4ovQ.js";import{t as b}from"./CartDrawer-BZqK1kPc.js";var x={class:`flex flex-col bg-brand md:h-svh md:overflow-hidden`},S={class:`md:flex-1 md:flex md:items-center`},C={class:`italic font-light text-accent-soft`},w={class:`italic font-light text-brand-soft`},T=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview-2.png`,E=`kaiser-natron-pulver-250-g-grosspackung`,D=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png`,O=`kaiser-natron-pulver-250-g-grosspackung`,k={__name:`HomePage`,setup(k){let{t:A}=d(),j=h(),M=u(!1);async function N(){await _(E,1),M.value=!0}async function P(){await _(O,1),M.value=!0}async function F({productId:e,quantity:t}){await p(e,t)}async function I(e){await m(e)}async function L(e){await _(e.id,1),M.value=!0}return l(()=>{g()}),(l,u)=>(t(),c(o,null,[s(`div`,x,[i(v,{variant:`brand`,layout:`standard`,"cart-count":n(j).count,products:n(f),onCart:u[0]||=e=>M.value=!0,onSearch:L},null,8,[`cart-count`,`products`]),s(`div`,S,[i(y,{class:`w-full`,variant:`split`,tone:`brand`,eyebrow:n(A)(`ds.hero.eyebrow`),subheadline:n(A)(`ds.hero.sub`),image:T,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":n(A)(`ds.buttons.addToCart`),"secondary-label":n(A)(`ds.buttons.learnMore`),"secondary-href":`/anwendungen`,onCta:N},{headline:e(()=>[a(r(n(A)(`ds.hero.headline.a`))+` `,1),s(`em`,C,r(n(A)(`ds.hero.headline.em`)),1),a(` `+r(n(A)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])]),u[3]||=s(`svg`,{"aria-hidden":`true`,class:`block w-full h-12 md:h-16 shrink-0 -mb-px`,viewBox:`0 0 1440 64`,preserveAspectRatio:`none`},[s(`rect`,{width:`1440`,height:`64`,fill:`var(--color-cream)`}),s(`path`,{d:`M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z`,fill:`var(--color-brand)`})],-1)]),i(y,{class:`-mt-px`,variant:`split`,tone:`cream`,reverse:``,eyebrow:n(A)(`home.banner.eyebrow`),subheadline:n(A)(`home.banner.sub`),image:D,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":n(A)(`ds.buttons.addToCart`),"secondary-label":n(A)(`ds.buttons.learnMore`),"secondary-href":`/anwendungen`,onCta:P},{headline:e(()=>[a(r(n(A)(`home.banner.headline.a`))+` `,1),s(`em`,w,r(n(A)(`home.banner.headline.em`)),1),a(` `+r(n(A)(`home.banner.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`]),u[4]||=s(`div`,{"aria-hidden":`true`,class:`md:hidden`,style:{height:`calc(100px + env(safe-area-inset-bottom))`}},null,-1),i(b,{modelValue:M.value,"onUpdate:modelValue":u[1]||=e=>M.value=e,items:n(j).items,subtotal:n(j).subtotal,count:n(j).count,onUpdateQuantity:F,onRemove:I,onCheckout:u[2]||=e=>M.value=!1},null,8,[`modelValue`,`items`,`subtotal`,`count`])],64))}};export{k as default};

dist/assets/Icon-BCRRMV3J.js

@@ -1 +1 @@
-import{S as e,l as t,o as n,u as r}from"./runtime-core.esm-bundler-DgkFZzbt.js";var i={cart:{path:`<path d="M6 7h12l-1.2 10.3a2 2 0 0 1-2 1.7H9.2a2 2 0 0 1-2-1.7L6 7Z" /><path d="M9 10V6a3 3 0 1 1 6 0v4" />`,label:`Warenkorb`},bag:{path:`<path d="M5 7h14v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7Z" /><path d="M9 7V5a3 3 0 1 1 6 0v2" />`,label:`Tasche`},heart:{path:`<path d="M12 20s-7-4.35-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.65-7 10-7 10Z" />`,label:`Favorit`},user:{path:`<circle cx="12" cy="8" r="3.5" /><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6" />`,label:`Konto`},search:{path:`<circle cx="11" cy="11" r="6.5" /><path d="m20 20-3.5-3.5" />`,label:`Suche`},menu:{path:`<path d="M5 7h14M5 12h14M5 17h14" />`,label:`Menü`},close:{path:`<path d="M6 6l12 12M18 6L6 18" />`,label:`Schließen`},"chevron-left":{path:`<path d="M14 6l-6 6 6 6" />`,label:`Zurück`},"chevron-right":{path:`<path d="M10 6l6 6-6 6" />`,label:`Weiter`},"chevron-down":{path:`<path d="M6 10l6 6 6-6" />`,label:`Öffnen`},"chevron-up":{path:`<path d="M6 14l6-6 6 6" />`,label:`Schließen`},"arrow-right":{path:`<path d="M5 12h14M13 6l6 6-6 6" />`,label:`Pfeil rechts`},"arrow-left":{path:`<path d="M19 12H5M11 6l-6 6 6 6" />`,label:`Pfeil links`},plus:{path:`<path d="M12 5v14M5 12h14" />`,label:`Hinzufügen`},minus:{path:`<path d="M5 12h14" />`,label:`Entfernen`},check:{path:`<path d="m5 12 5 5L20 7" />`,label:`Bestätigt`},trash:{path:`<path d="M4 7h16" /><path d="M10 11v6M14 11v6" /><path d="M6 7h12l-1 12a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L6 7Z" /><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" />`,label:`Löschen`},trash:{path:`<path d="M4 7h16" /><path d="M10 11v6M14 11v6" /><path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12" /><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" />`,label:`Entfernen`},mail:{path:`<rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" />`,label:`E-Mail`},phone:{path:`<path d="M21 16.5v3a2 2 0 0 1-2.2 2 19 19 0 0 1-8.3-3 19 19 0 0 1-6-6A19 19 0 0 1 1.5 4.2 2 2 0 0 1 3.5 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2L7.3 9.6a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2Z" />`,label:`Telefon`},"map-pin":{path:`<path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" />`,label:`Standort`},"external-link":{path:`<path d="M14 5h5v5" /><path d="M19 5l-9 9" /><path d="M19 14v5H5V5h5" />`,label:`Externer Link`},info:{path:`<circle cx="12" cy="12" r="9" /><path d="M12 11v5" /><circle cx="12" cy="8" r="0.6" fill="currentColor" stroke="none" />`,label:`Info`},star:{path:`<path d="m12 3 2.7 5.7 6.3.9-4.6 4.4 1.1 6.2L12 17.3 6.5 20.2l1.1-6.2L3 9.6l6.3-.9Z" />`,label:`Stern`},mobile:{path:`<rect x="7" y="3" width="10" height="18" rx="2" /><path d="M11 18h2" />`,label:`Mobile`},tablet:{path:`<rect x="4" y="3" width="16" height="18" rx="2" /><path d="M11 18h2" />`,label:`Tablet`},desktop:{path:`<rect x="3" y="4" width="18" height="12" rx="2" /><path d="M8 20h8M12 16v4" />`,label:`Desktop`}},a=[`width`,`height`,`stroke-width`,`role`,`aria-label`,`aria-hidden`,`innerHTML`],o={__name:`Icon`,props:{name:{type:String,required:!0},size:{type:[String,Number],default:20},strokeWidth:{type:[String,Number],default:1.8},label:{type:String,default:null}},setup(o){let s=o,c=n(()=>i[s.name]),l=n(()=>s.label??null);return(n,i)=>c.value?(e(),r(`svg`,{key:0,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,width:o.size,height:o.size,fill:`none`,stroke:`currentColor`,"stroke-width":o.strokeWidth,"stroke-linecap":`round`,"stroke-linejoin":`round`,role:l.value?`img`:`presentation`,"aria-label":l.value,"aria-hidden":l.value?null:`true`,innerHTML:c.value.path},null,8,a)):t(``,!0)}};export{i as n,o as t};
+import{C as e,l as t,o as n,u as r}from"./runtime-core.esm-bundler-BD0e4RlP.js";var i={cart:{path:`<path d="M6 7h12l-1.2 10.3a2 2 0 0 1-2 1.7H9.2a2 2 0 0 1-2-1.7L6 7Z" /><path d="M9 10V6a3 3 0 1 1 6 0v4" />`,label:`Warenkorb`},bag:{path:`<path d="M5 7h14v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7Z" /><path d="M9 7V5a3 3 0 1 1 6 0v2" />`,label:`Tasche`},heart:{path:`<path d="M12 20s-7-4.35-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.65-7 10-7 10Z" />`,label:`Favorit`},user:{path:`<circle cx="12" cy="8" r="3.5" /><path d="M5 20c0-3.5 3-6 7-6s7 2.5 7 6" />`,label:`Konto`},search:{path:`<circle cx="11" cy="11" r="6.5" /><path d="m20 20-3.5-3.5" />`,label:`Suche`},menu:{path:`<path d="M5 7h14M5 12h14M5 17h14" />`,label:`Menü`},close:{path:`<path d="M6 6l12 12M18 6L6 18" />`,label:`Schließen`},"chevron-left":{path:`<path d="M14 6l-6 6 6 6" />`,label:`Zurück`},"chevron-right":{path:`<path d="M10 6l6 6-6 6" />`,label:`Weiter`},"chevron-down":{path:`<path d="M6 10l6 6 6-6" />`,label:`Öffnen`},"chevron-up":{path:`<path d="M6 14l6-6 6 6" />`,label:`Schließen`},"arrow-right":{path:`<path d="M5 12h14M13 6l6 6-6 6" />`,label:`Pfeil rechts`},"arrow-left":{path:`<path d="M19 12H5M11 6l-6 6 6 6" />`,label:`Pfeil links`},plus:{path:`<path d="M12 5v14M5 12h14" />`,label:`Hinzufügen`},minus:{path:`<path d="M5 12h14" />`,label:`Entfernen`},check:{path:`<path d="m5 12 5 5L20 7" />`,label:`Bestätigt`},trash:{path:`<path d="M4 7h16" /><path d="M10 11v6M14 11v6" /><path d="M6 7h12l-1 12a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L6 7Z" /><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" />`,label:`Löschen`},trash:{path:`<path d="M4 7h16" /><path d="M10 11v6M14 11v6" /><path d="M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12" /><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" />`,label:`Entfernen`},mail:{path:`<rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" />`,label:`E-Mail`},phone:{path:`<path d="M21 16.5v3a2 2 0 0 1-2.2 2 19 19 0 0 1-8.3-3 19 19 0 0 1-6-6A19 19 0 0 1 1.5 4.2 2 2 0 0 1 3.5 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2L7.3 9.6a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2Z" />`,label:`Telefon`},"map-pin":{path:`<path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" />`,label:`Standort`},"external-link":{path:`<path d="M14 5h5v5" /><path d="M19 5l-9 9" /><path d="M19 14v5H5V5h5" />`,label:`Externer Link`},info:{path:`<circle cx="12" cy="12" r="9" /><path d="M12 11v5" /><circle cx="12" cy="8" r="0.6" fill="currentColor" stroke="none" />`,label:`Info`},star:{path:`<path d="m12 3 2.7 5.7 6.3.9-4.6 4.4 1.1 6.2L12 17.3 6.5 20.2l1.1-6.2L3 9.6l6.3-.9Z" />`,label:`Stern`},mobile:{path:`<rect x="7" y="3" width="10" height="18" rx="2" /><path d="M11 18h2" />`,label:`Mobile`},tablet:{path:`<rect x="4" y="3" width="16" height="18" rx="2" /><path d="M11 18h2" />`,label:`Tablet`},desktop:{path:`<rect x="3" y="4" width="18" height="12" rx="2" /><path d="M8 20h8M12 16v4" />`,label:`Desktop`}},a=[`width`,`height`,`stroke-width`,`role`,`aria-label`,`aria-hidden`,`innerHTML`],o={__name:`Icon`,props:{name:{type:String,required:!0},size:{type:[String,Number],default:20},strokeWidth:{type:[String,Number],default:1.8},label:{type:String,default:null}},setup(o){let s=o,c=n(()=>i[s.name]),l=n(()=>s.label??null);return(n,i)=>c.value?(e(),r(`svg`,{key:0,xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,width:o.size,height:o.size,fill:`none`,stroke:`currentColor`,"stroke-width":o.strokeWidth,"stroke-linecap":`round`,"stroke-linejoin":`round`,role:l.value?`img`:`presentation`,"aria-label":l.value,"aria-hidden":l.value?null:`true`,innerHTML:c.value.path},null,8,a)):t(``,!0)}};export{i as n,o as t};

dist/assets/IconButton-Cxmf-7_q.js

@@ -1 +1 @@
-import{S as e,T as t,ct as n,l as r,m as i,o as a,ot as o,u as s}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as c}from"./Icon-D1Ud4H_f.js";var l=[`type`,`aria-label`],u={key:0,class:`absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-danger text-white text-[10px] font-bold flex items-center justify-center`},d={__name:`IconButton`,props:{icon:{type:String,required:!0},iconSize:{type:Number,default:null},iconStrokeWidth:{type:[Number,String],default:null},variant:{type:String,default:`float`,validator:e=>[`float`,`accent`,`cream-wash`,`brand-wash`,`ghost`].includes(e)},size:{type:String,default:`lg`,validator:e=>[`xs`,`sm`,`md`,`lg`].includes(e)},shadow:{type:String,default:null,validator:e=>e===null||[`none`,`sm`,`md`,`lg`].includes(e)},count:{type:Number,default:null},ariaLabel:{type:String,default:``},type:{type:String,default:`button`}},emits:[`click`],setup(d){let f=d,p=new Set([`float`,`accent`]),m={float:`bg-brand-float text-accent`,accent:`bg-accent text-brand hover:bg-accent-soft`,"cream-wash":`bg-cream-wash text-cream hover:bg-cream-wash-strong`,"brand-wash":`bg-brand-wash text-brand`,ghost:`bg-transparent text-muted hover:bg-brand-wash hover:text-brand`},h={float:`shadow-lg`,accent:``,"cream-wash":``,"brand-wash":``,ghost:``},g={none:``,sm:`shadow-sm`,md:`shadow-md`,lg:`shadow-lg`},_={xs:{box:`w-9 h-9`,icon:18},sm:{box:`w-10 h-10`,icon:20},md:{box:`w-11 h-11`,icon:20},lg:{box:`w-14 h-14`,icon:22}},v=a(()=>p.has(f.variant)),y=a(()=>v.value?`transition-transform duration-base ease-out hover:-translate-y-0.5 active:translate-y-0`:`transition-colors`),b=a(()=>f.shadow===null?h[f.variant]:g[f.shadow]),x=a(()=>[`relative inline-flex items-center justify-center rounded-full`,_[f.size].box,m[f.variant],b.value,y.value]),S=a(()=>f.iconSize??_[f.size].icon);return(a,f)=>(e(),s(`button`,{type:d.type,class:o(x.value),"aria-label":d.ariaLabel||void 0,onClick:f[0]||=e=>a.$emit(`click`,e)},[i(c,{name:d.icon,size:S.value,"stroke-width":d.iconStrokeWidth??void 0},null,8,[`name`,`size`,`stroke-width`]),d.count!==null&&d.count>0?(e(),s(`span`,u,n(d.count),1)):r(``,!0),t(a.$slots,`default`)],10,l))}};export{d as t};
+import{C as e,E as t,l as n,lt as r,m as i,o as a,st as o,u as s}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as c}from"./Icon-BCRRMV3J.js";var l=[`type`,`aria-label`],u={key:0,class:`absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-danger text-white text-[10px] font-bold flex items-center justify-center`},d={__name:`IconButton`,props:{icon:{type:String,required:!0},iconSize:{type:Number,default:null},iconStrokeWidth:{type:[Number,String],default:null},variant:{type:String,default:`float`,validator:e=>[`float`,`accent`,`cream-wash`,`brand-wash`,`ghost`].includes(e)},size:{type:String,default:`lg`,validator:e=>[`xs`,`sm`,`md`,`lg`].includes(e)},shadow:{type:String,default:null,validator:e=>e===null||[`none`,`sm`,`md`,`lg`].includes(e)},count:{type:Number,default:null},ariaLabel:{type:String,default:``},type:{type:String,default:`button`}},emits:[`click`],setup(d){let f=d,p=new Set([`float`,`accent`]),m={float:`bg-brand-float text-accent`,accent:`bg-accent text-brand hover:bg-accent-soft`,"cream-wash":`bg-cream-wash text-cream hover:bg-cream-wash-strong`,"brand-wash":`bg-brand-wash text-brand`,ghost:`bg-transparent text-muted hover:bg-brand-wash hover:text-brand`},h={float:`shadow-lg`,accent:``,"cream-wash":``,"brand-wash":``,ghost:``},g={none:``,sm:`shadow-sm`,md:`shadow-md`,lg:`shadow-lg`},_={xs:{box:`w-9 h-9`,icon:18},sm:{box:`w-10 h-10`,icon:20},md:{box:`w-11 h-11`,icon:20},lg:{box:`w-14 h-14`,icon:22}},v=a(()=>p.has(f.variant)),y=a(()=>v.value?`transition-transform duration-base ease-out hover:-translate-y-0.5 active:translate-y-0`:`transition-colors`),b=a(()=>f.shadow===null?h[f.variant]:g[f.shadow]),x=a(()=>[`relative inline-flex items-center justify-center rounded-full`,_[f.size].box,m[f.variant],b.value,y.value]),S=a(()=>f.iconSize??_[f.size].icon);return(a,f)=>(e(),s(`button`,{type:d.type,class:o(x.value),"aria-label":d.ariaLabel||void 0,onClick:f[0]||=e=>a.$emit(`click`,e)},[i(c,{name:d.icon,size:S.value,"stroke-width":d.iconStrokeWidth??void 0},null,8,[`name`,`size`,`stroke-width`]),d.count!==null&&d.count>0?(e(),s(`span`,u,r(d.count),1)):n(``,!0),t(a.$slots,`default`)],10,l))}};export{d as t};

dist/assets/IconsSection-Blraf0uZ.js

@@ -1,2 +1,2 @@
-import{A as e,S as t,W as n,c as r,ct as i,j as a,l as o,m as s,o as c,r as l,s as u,u as d,w as f,z as p}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{r as m}from"./runtime-dom.esm-bundler-ouKdkQwB.js";import{n as h,t as g}from"./Icon-D1Ud4H_f.js";import{t as _}from"./i18n-BxXwPz8H.js";import{t as v}from"./SectionShell-CHsfR9Y3.js";var y={class:`mb-5 flex items-center gap-3 flex-wrap`},b={class:`relative inline-flex items-center`},x={class:`absolute left-3 text-muted pointer-events-none`},S=[`placeholder`],C={class:`text-[12px] text-muted`},w={key:0,class:`text-[14px] text-muted`},T={class:`eyebrow mb-4`},E={class:`grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-3`},D=[`onClick`],O={class:`w-10 h-10 rounded-sm bg-cream text-brand flex items-center justify-center`},k={class:`font-mono text-[11px] text-muted group-hover:text-brand transition-colors`},A={class:`eyebrow mb-5`},j={class:`grid md:grid-cols-3 gap-4`},M={class:`rounded-md border border-line bg-paper text-brand p-8 flex items-center justify-center gap-6`},N={class:`rounded-md border border-line bg-cream text-brand p-8 flex items-center justify-center gap-6`},P={class:`rounded-md bg-brand text-accent p-8 flex items-center justify-center gap-6`},F={class:`eyebrow mb-5`},I={class:`rounded-md border border-line bg-paper p-8 flex items-end gap-8 text-brand`},L={class:`flex flex-col items-center gap-3`},R={class:`flex flex-col items-center gap-3`},z={class:`font-mono text-[11px] text-muted`},B={class:`flex flex-col items-center gap-3`},V={class:`flex flex-col items-center gap-3`},H={class:`flex flex-col items-center gap-3`},U={class:`eyebrow mb-5`},W={__name:`IconsSection`,setup(W){let{t:G}=_(),K=c(()=>[{title:G(`ds.icons.group.commerce`),names:[`cart`,`bag`,`heart`,`user`,`search`]},{title:G(`ds.icons.group.navigation`),names:[`menu`,`close`,`chevron-left`,`chevron-right`,`chevron-down`,`chevron-up`,`arrow-left`,`arrow-right`]},{title:G(`ds.icons.group.actions`),names:[`plus`,`minus`,`check`]},{title:G(`ds.icons.group.contact`),names:[`mail`,`phone`,`map-pin`,`external-link`]},{title:G(`ds.icons.group.feedback`),names:[`info`,`star`]},{title:G(`ds.icons.group.devices`),names:[`mobile`,`tablet`,`desktop`]}]),q=p(``),J=c(()=>{let e=q.value.trim().toLowerCase();return e?K.value.map(t=>({...t,names:t.names.filter(t=>t.includes(e)||(h[t]?.label||``).toLowerCase().includes(e))})).filter(e=>e.names.length>0):K.value}),Y=p(``);async function X(e){let t=`<Icon name="${e}" />`;try{await navigator.clipboard.writeText(t),Y.value=e,setTimeout(()=>{Y.value===e&&(Y.value=``)},1200)}catch{}}return(c,p)=>(t(),r(v,{eyebrow:n(G)(`ds.eyebrow.components`),title:n(G)(`ds.icons.title`),description:n(G)(`ds.icons.description`)},{default:e(()=>[u(`section`,null,[u(`div`,y,[u(`label`,b,[u(`span`,x,[s(g,{name:`search`,size:16})]),a(u(`input`,{"onUpdate:modelValue":p[0]||=e=>q.value=e,type:`search`,placeholder:n(G)(`ds.icons.search`),class:`pl-9 pr-4 py-2 rounded-pill border border-line bg-paper text-[14px] text-ink placeholder:text-muted focus:outline-none focus:border-brand w-[260px]`},null,8,S),[[m,q.value]])]),u(`span`,C,i(n(G)(`ds.icons.copyHint`)),1)]),J.value.length===0?(t(),d(`div`,w,i(n(G)(`ds.icons.noMatch`))+` "`+i(q.value)+`". `,1)):o(``,!0),(t(!0),d(l,null,f(J.value,e=>(t(),d(`div`,{key:e.title,class:`mb-10 last:mb-0`},[u(`h2`,T,i(e.title),1),u(`div`,E,[(t(!0),d(l,null,f(e.names,e=>(t(),d(`button`,{key:e,type:`button`,class:`group flex flex-col items-center justify-center gap-2 p-4 rounded-md border border-line bg-paper text-ink hover:border-brand-soft hover:-translate-y-0.5 hover:shadow-sm transition-all duration-base ease-out`,onClick:t=>X(e)},[u(`span`,O,[s(g,{name:e,size:22},null,8,[`name`])]),u(`span`,k,i(Y.value===e?n(G)(`ds.icons.copied`):e),1)],8,D))),128))])]))),128))]),u(`section`,null,[u(`h2`,A,i(n(G)(`ds.heading.onDifferentSurfaces`)),1),u(`div`,j,[u(`div`,M,[s(g,{name:`cart`,size:28}),s(g,{name:`heart`,size:28}),s(g,{name:`user`,size:28})]),u(`div`,N,[s(g,{name:`cart`,size:28}),s(g,{name:`heart`,size:28}),s(g,{name:`user`,size:28})]),u(`div`,P,[s(g,{name:`cart`,size:28}),s(g,{name:`heart`,size:28}),s(g,{name:`user`,size:28})])])]),u(`section`,null,[u(`h2`,F,i(n(G)(`ds.heading.sizes`)),1),u(`div`,I,[u(`div`,L,[s(g,{name:`cart`,size:16}),p[1]||=u(`code`,{class:`font-mono text-[11px] text-muted`},`16`,-1)]),u(`div`,R,[s(g,{name:`cart`,size:20}),u(`code`,z,i(n(G)(`ds.icons.sizeDefault`)),1)]),u(`div`,B,[s(g,{name:`cart`,size:24}),p[2]||=u(`code`,{class:`font-mono text-[11px] text-muted`},`24`,-1)]),u(`div`,V,[s(g,{name:`cart`,size:32}),p[3]||=u(`code`,{class:`font-mono text-[11px] text-muted`},`32`,-1)]),u(`div`,H,[s(g,{name:`cart`,size:48}),p[4]||=u(`code`,{class:`font-mono text-[11px] text-muted`},`48`,-1)])])]),u(`section`,null,[u(`h2`,U,i(n(G)(`ds.heading.usage`)),1),p[5]||=u(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[u(`pre`,{class:`whitespace-pre-wrap`},`<Icon name="cart" :size="20" />
+import{B as e,C as t,G as n,M as r,T as i,c as a,j as o,l as s,lt as c,m as l,o as u,r as d,s as f,u as p}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{r as m}from"./runtime-dom.esm-bundler-CcSFQHoC.js";import{n as h,t as g}from"./Icon-BCRRMV3J.js";import{t as _}from"./i18n-C5xQ6LQM.js";import{t as v}from"./SectionShell-BEISUYi8.js";var y={class:`mb-5 flex items-center gap-3 flex-wrap`},b={class:`relative inline-flex items-center`},x={class:`absolute left-3 text-muted pointer-events-none`},S=[`placeholder`],C={class:`text-[12px] text-muted`},w={key:0,class:`text-[14px] text-muted`},T={class:`eyebrow mb-4`},E={class:`grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-3`},D=[`onClick`],O={class:`w-10 h-10 rounded-sm bg-cream text-brand flex items-center justify-center`},k={class:`font-mono text-[11px] text-muted group-hover:text-brand transition-colors`},A={class:`eyebrow mb-5`},j={class:`grid md:grid-cols-3 gap-4`},M={class:`rounded-md border border-line bg-paper text-brand p-8 flex items-center justify-center gap-6`},N={class:`rounded-md border border-line bg-cream text-brand p-8 flex items-center justify-center gap-6`},P={class:`rounded-md bg-brand text-accent p-8 flex items-center justify-center gap-6`},F={class:`eyebrow mb-5`},I={class:`rounded-md border border-line bg-paper p-8 flex items-end gap-8 text-brand`},L={class:`flex flex-col items-center gap-3`},R={class:`flex flex-col items-center gap-3`},z={class:`font-mono text-[11px] text-muted`},B={class:`flex flex-col items-center gap-3`},V={class:`flex flex-col items-center gap-3`},H={class:`flex flex-col items-center gap-3`},U={class:`eyebrow mb-5`},W={__name:`IconsSection`,setup(W){let{t:G}=_(),K=u(()=>[{title:G(`ds.icons.group.commerce`),names:[`cart`,`bag`,`heart`,`user`,`search`]},{title:G(`ds.icons.group.navigation`),names:[`menu`,`close`,`chevron-left`,`chevron-right`,`chevron-down`,`chevron-up`,`arrow-left`,`arrow-right`]},{title:G(`ds.icons.group.actions`),names:[`plus`,`minus`,`check`]},{title:G(`ds.icons.group.contact`),names:[`mail`,`phone`,`map-pin`,`external-link`]},{title:G(`ds.icons.group.feedback`),names:[`info`,`star`]},{title:G(`ds.icons.group.devices`),names:[`mobile`,`tablet`,`desktop`]}]),q=e(``),J=u(()=>{let e=q.value.trim().toLowerCase();return e?K.value.map(t=>({...t,names:t.names.filter(t=>t.includes(e)||(h[t]?.label||``).toLowerCase().includes(e))})).filter(e=>e.names.length>0):K.value}),Y=e(``);async function X(e){let t=`<Icon name="${e}" />`;try{await navigator.clipboard.writeText(t),Y.value=e,setTimeout(()=>{Y.value===e&&(Y.value=``)},1200)}catch{}}return(e,u)=>(t(),a(v,{eyebrow:n(G)(`ds.eyebrow.components`),title:n(G)(`ds.icons.title`),description:n(G)(`ds.icons.description`)},{default:o(()=>[f(`section`,null,[f(`div`,y,[f(`label`,b,[f(`span`,x,[l(g,{name:`search`,size:16})]),r(f(`input`,{"onUpdate:modelValue":u[0]||=e=>q.value=e,type:`search`,placeholder:n(G)(`ds.icons.search`),class:`pl-9 pr-4 py-2 rounded-pill border border-line bg-paper text-[14px] text-ink placeholder:text-muted focus:outline-none focus:border-brand w-[260px]`},null,8,S),[[m,q.value]])]),f(`span`,C,c(n(G)(`ds.icons.copyHint`)),1)]),J.value.length===0?(t(),p(`div`,w,c(n(G)(`ds.icons.noMatch`))+` "`+c(q.value)+`". `,1)):s(``,!0),(t(!0),p(d,null,i(J.value,e=>(t(),p(`div`,{key:e.title,class:`mb-10 last:mb-0`},[f(`h2`,T,c(e.title),1),f(`div`,E,[(t(!0),p(d,null,i(e.names,e=>(t(),p(`button`,{key:e,type:`button`,class:`group flex flex-col items-center justify-center gap-2 p-4 rounded-md border border-line bg-paper text-ink hover:border-brand-soft hover:-translate-y-0.5 hover:shadow-sm transition-all duration-base ease-out`,onClick:t=>X(e)},[f(`span`,O,[l(g,{name:e,size:22},null,8,[`name`])]),f(`span`,k,c(Y.value===e?n(G)(`ds.icons.copied`):e),1)],8,D))),128))])]))),128))]),f(`section`,null,[f(`h2`,A,c(n(G)(`ds.heading.onDifferentSurfaces`)),1),f(`div`,j,[f(`div`,M,[l(g,{name:`cart`,size:28}),l(g,{name:`heart`,size:28}),l(g,{name:`user`,size:28})]),f(`div`,N,[l(g,{name:`cart`,size:28}),l(g,{name:`heart`,size:28}),l(g,{name:`user`,size:28})]),f(`div`,P,[l(g,{name:`cart`,size:28}),l(g,{name:`heart`,size:28}),l(g,{name:`user`,size:28})])])]),f(`section`,null,[f(`h2`,F,c(n(G)(`ds.heading.sizes`)),1),f(`div`,I,[f(`div`,L,[l(g,{name:`cart`,size:16}),u[1]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`16`,-1)]),f(`div`,R,[l(g,{name:`cart`,size:20}),f(`code`,z,c(n(G)(`ds.icons.sizeDefault`)),1)]),f(`div`,B,[l(g,{name:`cart`,size:24}),u[2]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`24`,-1)]),f(`div`,V,[l(g,{name:`cart`,size:32}),u[3]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`32`,-1)]),f(`div`,H,[l(g,{name:`cart`,size:48}),u[4]||=f(`code`,{class:`font-mono text-[11px] text-muted`},`48`,-1)])])]),f(`section`,null,[f(`h2`,U,c(n(G)(`ds.heading.usage`)),1),u[5]||=f(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[f(`pre`,{class:`whitespace-pre-wrap`},`<Icon name="cart" :size="20" />
 <Icon name="arrow-right" :size="16" label="Next slide" />`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{W as default};

dist/assets/InputsSection-Be5hSyLd.js

@@ -1 +0,0 @@
-import{A as e,O as t,S as n,W as r,c as i,ct as a,l as o,m as s,o as c,ot as l,p as u,s as d,u as f,z as p}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as m}from"./i18n-BxXwPz8H.js";import{t as h}from"./SectionShell-CHsfR9Y3.js";import{t as g}from"./Card-BhcSEJNV.js";var _={class:`flex flex-col gap-2`},v=[`for`],y={key:0,class:`text-danger`},b=[`id`,`type`,`value`,`placeholder`,`disabled`,`required`,`aria-invalid`,`aria-describedby`],x=[`id`],S=[`id`],C={__name:`Input`,props:{modelValue:{type:[String,Number],default:``},label:{type:String,default:``},hint:{type:String,default:``},error:{type:String,default:``},type:{type:String,default:`text`},placeholder:{type:String,default:``},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:[`update:modelValue`],setup(e){let r=e,i=t(),s=c(()=>`in-${i}`),p=c(()=>r.hint?`hint-${i}`:void 0),m=c(()=>r.error?`err-${i}`:void 0),h=c(()=>[p.value,m.value].filter(Boolean).join(` `)||void 0);return(t,r)=>(n(),f(`div`,_,[e.label?(n(),f(`label`,{key:0,for:s.value,class:`text-[11px] font-bold uppercase tracking-eyebrow text-muted`},[u(a(e.label),1),e.required?(n(),f(`span`,y,` *`)):o(``,!0)],8,v)):o(``,!0),d(`input`,{id:s.value,type:e.type,value:e.modelValue,placeholder:e.placeholder,disabled:e.disabled,required:e.required,"aria-invalid":!!e.error,"aria-describedby":h.value,class:l([`w-full rounded-sm border bg-paper px-4 py-3 text-[15px] text-ink placeholder:text-ink-placeholder transition-colors duration-base focus:outline-none focus:border-brand disabled:opacity-50 disabled:cursor-not-allowed`,e.error?`border-danger`:`border-line`]),onInput:r[0]||=e=>t.$emit(`update:modelValue`,e.target.value)},null,42,b),e.hint&&!e.error?(n(),f(`p`,{key:1,id:p.value,class:`text-[13px] text-muted`},a(e.hint),9,x)):o(``,!0),e.error?(n(),f(`p`,{key:2,id:m.value,class:`text-[13px] text-danger`},a(e.error),9,S)):o(``,!0)]))}},w={class:`eyebrow mb-5`},T={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},E={class:`eyebrow mb-5`},D={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},O={__name:`InputsSection`,setup(t){let{t:o}=m(),c=p(``),l=p(``),u=p(``);return(t,f)=>(n(),i(h,{eyebrow:r(o)(`ds.eyebrow.components`),title:r(o)(`ds.inputs.title`),description:r(o)(`ds.inputs.description`)},{default:e(()=>[d(`section`,null,[d(`h2`,w,a(r(o)(`ds.heading.default`)),1),s(g,{tone:`paper`},{default:e(()=>[d(`div`,T,[s(C,{modelValue:c.value,"onUpdate:modelValue":f[0]||=e=>c.value=e,label:r(o)(`ds.inputs.email`),type:`email`,placeholder:`you@example.com`,hint:r(o)(`ds.inputs.emailHint`)},null,8,[`modelValue`,`label`,`hint`]),s(C,{modelValue:l.value,"onUpdate:modelValue":f[1]||=e=>l.value=e,label:r(o)(`ds.inputs.password`),type:`password`,placeholder:`••••••••`},null,8,[`modelValue`,`label`])])]),_:1})]),d(`section`,null,[d(`h2`,E,a(r(o)(`ds.heading.states`)),1),s(g,{tone:`paper`},{default:e(()=>[d(`div`,D,[s(C,{modelValue:u.value,"onUpdate:modelValue":f[2]||=e=>u.value=e,label:r(o)(`ds.inputs.required`),required:``,error:r(o)(`ds.inputs.requiredError`)},null,8,[`modelValue`,`label`,`error`]),s(C,{label:r(o)(`ds.inputs.disabled`),placeholder:r(o)(`ds.inputs.disabledPlaceholder`),disabled:``},null,8,[`label`,`placeholder`])])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{O as default};

dist/assets/InputsSection-CCN6_kH4.js

@@ -0,0 +1 @@
+import{B as e,C as t,G as n,c as r,j as i,k as a,l as o,lt as s,m as c,o as l,p as u,s as d,st as f,u as p}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as m}from"./i18n-C5xQ6LQM.js";import{t as h}from"./SectionShell-BEISUYi8.js";import{t as g}from"./Card-DM27vc3f.js";var _={class:`flex flex-col gap-2`},v=[`for`],y={key:0,class:`text-danger`},b=[`id`,`type`,`value`,`placeholder`,`disabled`,`required`,`aria-invalid`,`aria-describedby`],x=[`id`],S=[`id`],C={__name:`Input`,props:{modelValue:{type:[String,Number],default:``},label:{type:String,default:``},hint:{type:String,default:``},error:{type:String,default:``},type:{type:String,default:`text`},placeholder:{type:String,default:``},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:[`update:modelValue`],setup(e){let n=e,r=a(),i=l(()=>`in-${r}`),c=l(()=>n.hint?`hint-${r}`:void 0),m=l(()=>n.error?`err-${r}`:void 0),h=l(()=>[c.value,m.value].filter(Boolean).join(` `)||void 0);return(n,r)=>(t(),p(`div`,_,[e.label?(t(),p(`label`,{key:0,for:i.value,class:`text-[11px] font-bold uppercase tracking-eyebrow text-muted`},[u(s(e.label),1),e.required?(t(),p(`span`,y,` *`)):o(``,!0)],8,v)):o(``,!0),d(`input`,{id:i.value,type:e.type,value:e.modelValue,placeholder:e.placeholder,disabled:e.disabled,required:e.required,"aria-invalid":!!e.error,"aria-describedby":h.value,class:f([`w-full rounded-sm border bg-paper px-4 py-3 text-[15px] text-ink placeholder:text-ink-placeholder transition-colors duration-base focus:outline-none focus:border-brand disabled:opacity-50 disabled:cursor-not-allowed`,e.error?`border-danger`:`border-line`]),onInput:r[0]||=e=>n.$emit(`update:modelValue`,e.target.value)},null,42,b),e.hint&&!e.error?(t(),p(`p`,{key:1,id:c.value,class:`text-[13px] text-muted`},s(e.hint),9,x)):o(``,!0),e.error?(t(),p(`p`,{key:2,id:m.value,class:`text-[13px] text-danger`},s(e.error),9,S)):o(``,!0)]))}},w={class:`eyebrow mb-5`},T={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},E={class:`eyebrow mb-5`},D={class:`grid md:grid-cols-2 gap-6 max-w-3xl`},O={__name:`InputsSection`,setup(a){let{t:o}=m(),l=e(``),u=e(``),f=e(``);return(e,a)=>(t(),r(h,{eyebrow:n(o)(`ds.eyebrow.components`),title:n(o)(`ds.inputs.title`),description:n(o)(`ds.inputs.description`)},{default:i(()=>[d(`section`,null,[d(`h2`,w,s(n(o)(`ds.heading.default`)),1),c(g,{tone:`paper`},{default:i(()=>[d(`div`,T,[c(C,{modelValue:l.value,"onUpdate:modelValue":a[0]||=e=>l.value=e,label:n(o)(`ds.inputs.email`),type:`email`,placeholder:`you@example.com`,hint:n(o)(`ds.inputs.emailHint`)},null,8,[`modelValue`,`label`,`hint`]),c(C,{modelValue:u.value,"onUpdate:modelValue":a[1]||=e=>u.value=e,label:n(o)(`ds.inputs.password`),type:`password`,placeholder:`••••••••`},null,8,[`modelValue`,`label`])])]),_:1})]),d(`section`,null,[d(`h2`,E,s(n(o)(`ds.heading.states`)),1),c(g,{tone:`paper`},{default:i(()=>[d(`div`,D,[c(C,{modelValue:f.value,"onUpdate:modelValue":a[2]||=e=>f.value=e,label:n(o)(`ds.inputs.required`),required:``,error:n(o)(`ds.inputs.requiredError`)},null,8,[`modelValue`,`label`,`error`]),c(C,{label:n(o)(`ds.inputs.disabled`),placeholder:n(o)(`ds.inputs.disabledPlaceholder`),disabled:``},null,8,[`label`,`placeholder`])])]),_:1})])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{O as default};

dist/assets/LanguageSwitcher-B_-EYSnY.js

@@ -1 +1 @@
-import{S as e,W as t,ct as n,o as r,ot as i,r as a,u as o,w as s}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as c}from"./i18n-BxXwPz8H.js";var l=[`aria-label`,`aria-pressed`,`onClick`],u={__name:`LanguageSwitcher`,props:{floating:{type:Boolean,default:!1},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`,`brand`].includes(e)}},setup(u){let d=u,{locale:f,setLocale:p,availableLocales:m}=c(),h={paper:{container:`border border-line bg-paper`,active:`bg-brand text-accent`,inactive:`text-muted hover:text-brand`},cream:{container:`border border-line-strong bg-paper`,active:`bg-brand text-accent`,inactive:`text-muted hover:text-brand`},brand:{container:`border border-cream-line bg-cream-wash`,active:`bg-accent text-brand`,inactive:`text-cream hover:text-accent`}},g=r(()=>h[d.tone]);return(r,c)=>(e(),o(`div`,{role:`group`,"aria-label":`Language`,class:i([`inline-flex items-center h-10 px-2 gap-0.5 rounded-pill font-sans`,g.value.container,u.floating?`fixed top-6 right-6 z-[60] shadow-sm`:``])},[(e(!0),o(a,null,s(t(m),r=>(e(),o(`button`,{key:r.code,type:`button`,"aria-label":r.name,"aria-pressed":t(f)===r.code,class:i([`px-2.5 py-1 text-[11px] font-bold tracking-eyebrow rounded-pill transition-colors duration-base`,t(f)===r.code?g.value.active:g.value.inactive]),onClick:e=>t(p)(r.code)},n(r.label),11,l))),128))],2))}};export{u as t};
+import{C as e,G as t,T as n,lt as r,o as i,r as a,st as o,u as s}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as c}from"./i18n-C5xQ6LQM.js";var l=[`aria-label`,`aria-pressed`,`onClick`],u={__name:`LanguageSwitcher`,props:{floating:{type:Boolean,default:!1},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`,`brand`].includes(e)}},setup(u){let d=u,{locale:f,setLocale:p,availableLocales:m}=c(),h={paper:{container:`border border-line bg-paper`,active:`bg-brand text-accent`,inactive:`text-muted hover:text-brand`},cream:{container:`border border-line-strong bg-paper`,active:`bg-brand text-accent`,inactive:`text-muted hover:text-brand`},brand:{container:`border border-cream-line bg-cream-wash`,active:`bg-accent text-brand`,inactive:`text-cream hover:text-accent`}},g=i(()=>h[d.tone]);return(i,c)=>(e(),s(`div`,{role:`group`,"aria-label":`Language`,class:o([`inline-flex items-center h-10 px-2 gap-0.5 rounded-pill font-sans`,g.value.container,u.floating?`fixed top-6 right-6 z-[60] shadow-sm`:``])},[(e(!0),s(a,null,n(t(m),n=>(e(),s(`button`,{key:n.code,type:`button`,"aria-label":n.name,"aria-pressed":t(f)===n.code,class:o([`px-2.5 py-1 text-[11px] font-bold tracking-eyebrow rounded-pill transition-colors duration-base`,t(f)===n.code?g.value.active:g.value.inactive]),onClick:e=>t(p)(n.code)},r(n.label),11,l))),128))],2))}};export{u as t};

dist/assets/LanguageSwitcherSection-CJlfx8nC.js

@@ -1,3 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,m as a,s as o}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as s}from"./i18n-BxXwPz8H.js";import{t as c}from"./LanguageSwitcher-CtoC4wR8.js";import{t as l}from"./SectionShell-CHsfR9Y3.js";import{t as u}from"./Card-BhcSEJNV.js";var d={class:`eyebrow mb-5`},f={class:`grid md:grid-cols-3 gap-4`},p={class:`eyebrow mb-4`},m={class:`text-[13px] text-muted mt-4 leading-relaxed`},h={class:`eyebrow mb-4`},g={class:`text-[13px] text-muted mt-4 leading-relaxed`},_={class:`eyebrow mb-4`},v={class:`text-[13px] opacity-80 mt-4 leading-relaxed`},y={class:`eyebrow mb-5`},b={class:`text-[13px] text-muted max-w-2xl leading-relaxed`},x={class:`eyebrow mb-5`},S={__name:`LanguageSwitcherSection`,setup(S){let{t:C}=s();return(s,S)=>(t(),r(l,{eyebrow:n(C)(`ds.eyebrow.components`),title:n(C)(`ds.language.title`),description:n(C)(`ds.language.description`)},{default:e(()=>[o(`section`,null,[o(`h2`,d,i(n(C)(`ds.heading.onDifferentSurfaces`)),1),o(`div`,f,[a(u,{tone:`paper`},{default:e(()=>[o(`p`,p,i(n(C)(`ds.cards.paper`)),1),a(c,{tone:`paper`}),o(`p`,m,i(n(C)(`ds.language.paperNote`)),1)]),_:1}),a(u,{tone:`cream`},{default:e(()=>[o(`p`,h,i(n(C)(`ds.cards.cream`)),1),a(c,{tone:`cream`}),o(`p`,g,i(n(C)(`ds.language.creamNote`)),1)]),_:1}),a(u,{tone:`brand`},{default:e(()=>[o(`p`,_,i(n(C)(`ds.cards.brand`)),1),a(c,{tone:`brand`}),o(`p`,v,i(n(C)(`ds.language.brandNote`)),1)]),_:1})])]),o(`section`,null,[o(`h2`,y,i(n(C)(`ds.language.floating`)),1),a(u,{tone:`paper`},{default:e(()=>[o(`p`,b,i(n(C)(`ds.language.floatingNote`)),1)]),_:1})]),o(`section`,null,[o(`h2`,x,i(n(C)(`ds.heading.usage`)),1),S[0]||=o(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[o(`pre`,{class:`whitespace-pre-wrap`},`<LanguageSwitcher />
-<LanguageSwitcher tone="brand" />
-<LanguageSwitcher floating />`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{S as default};

dist/assets/LanguageSwitcherSection-CpsCrqF9.js

@@ -0,0 +1,3 @@
+import{C as e,G as t,c as n,j as r,lt as i,m as a,s as o}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as s}from"./i18n-C5xQ6LQM.js";import{t as c}from"./LanguageSwitcher-B_-EYSnY.js";import{t as l}from"./SectionShell-BEISUYi8.js";import{t as u}from"./Card-DM27vc3f.js";var d={class:`eyebrow mb-5`},f={class:`grid md:grid-cols-3 gap-4`},p={class:`eyebrow mb-4`},m={class:`text-[13px] text-muted mt-4 leading-relaxed`},h={class:`eyebrow mb-4`},g={class:`text-[13px] text-muted mt-4 leading-relaxed`},_={class:`eyebrow mb-4`},v={class:`text-[13px] opacity-80 mt-4 leading-relaxed`},y={class:`eyebrow mb-5`},b={class:`text-[13px] text-muted max-w-2xl leading-relaxed`},x={class:`eyebrow mb-5`},S={__name:`LanguageSwitcherSection`,setup(S){let{t:C}=s();return(s,S)=>(e(),n(l,{eyebrow:t(C)(`ds.eyebrow.components`),title:t(C)(`ds.language.title`),description:t(C)(`ds.language.description`)},{default:r(()=>[o(`section`,null,[o(`h2`,d,i(t(C)(`ds.heading.onDifferentSurfaces`)),1),o(`div`,f,[a(u,{tone:`paper`},{default:r(()=>[o(`p`,p,i(t(C)(`ds.cards.paper`)),1),a(c,{tone:`paper`}),o(`p`,m,i(t(C)(`ds.language.paperNote`)),1)]),_:1}),a(u,{tone:`cream`},{default:r(()=>[o(`p`,h,i(t(C)(`ds.cards.cream`)),1),a(c,{tone:`cream`}),o(`p`,g,i(t(C)(`ds.language.creamNote`)),1)]),_:1}),a(u,{tone:`brand`},{default:r(()=>[o(`p`,_,i(t(C)(`ds.cards.brand`)),1),a(c,{tone:`brand`}),o(`p`,v,i(t(C)(`ds.language.brandNote`)),1)]),_:1})])]),o(`section`,null,[o(`h2`,y,i(t(C)(`ds.language.floating`)),1),a(u,{tone:`paper`},{default:r(()=>[o(`p`,b,i(t(C)(`ds.language.floatingNote`)),1)]),_:1})]),o(`section`,null,[o(`h2`,x,i(t(C)(`ds.heading.usage`)),1),S[0]||=o(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[o(`pre`,{class:`whitespace-pre-wrap`},`<LanguageSwitcher />
+<LanguageSwitcher tone="brand" />
+<LanguageSwitcher floating />`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{S as default};

dist/assets/Logo-FFBeOKwm.js

@@ -1 +1 @@
-import{S as e,ct as t,f as n,s as r,u as i}from"./runtime-core.esm-bundler-DgkFZzbt.js";var a=[`aria-label`],o={__name:`Logo`,props:{title:{type:String,default:`Kaiser Natron`}},setup(o){return(s,c)=>(e(),i(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 121.9 76.9`,role:`img`,"aria-label":o.title,fill:`currentColor`},[r(`title`,null,t(o.title),1),c[0]||=n(`<g><polygon points="13.8,15.6 6.7,28.7 6.7,17.5 0,19.3 0,46.4 6.8,44.6 6.7,38.4 9.8,33.3 15.3,42.4 22.4,40.4 14.1,25.9 21.3,13.6"></polygon><path d="M33.1,32c0.6-0.2,1.1-0.4,1.6-0.9l0-7.3c-0.7-0.1-1.3,0-2.1,0.2c-3.1,0.8-3.9,3.2-3.2,5.7 C29.9,31.8,31.2,32.5,33.1,32 M36.3,35.3c-1.1,1.5-2.6,2.6-4.5,3.1c-3.7,1-7.3-0.6-8.8-5.9c-1.7-6.3,1.1-12,7.5-13.7 c2.3-0.6,4.4-0.5,6.1,0.2l1-1.7l3.5-0.9l0,19.1l-3.6,1L36.3,35.3z"></path><path d="M44.9,15.4l6.4-1.7l0,19.1l-6.4,1.7L44.9,15.4z M44.7,5.9l6.6-1.8l0,6.6l-6.7,1.8L44.7,5.9z"></path><path d="M55.6,29.9l-1.3-6.1c2.6,1.1,5.3,1.7,7.2,1.2c0.8-0.2,1.1-0.7,1-1.3c-0.1-0.5-0.6-0.7-2.2-1.1l-0.4-0.1 c-2.9-0.6-4.5-1.8-5.1-4.1c-0.9-3.3,1.1-6.7,5.4-7.8c2.4-0.6,4.9-0.6,6.9,0l0.2,5.6c-1.7-0.7-3.9-0.9-5.1-0.6 c-1,0.3-1.4,0.8-1.2,1.5c0.1,0.4,0.5,0.7,2,1l0.5,0.1c3,0.7,4.3,1.7,4.9,3.8c1,3.6-1.4,6.7-5.6,7.9C60,30.8,57.6,30.8,55.6,29.9"></path><path d="M76.4,14.7l5.4-1.4c-0.6-1.8-1.7-2.5-3-2.1C77.4,11.5,76.5,12.8,76.4,14.7 M80.5,25.3 c-4.5,1.2-8.6,0.2-10.1-5.4c-1.8-6.5,1.7-12.3,7.2-13.8c4.8-1.3,7.8,1.1,9.1,6.1c0.2,0.7,0.4,1.6,0.4,2.4l-10.4,2.8 c0.8,2.3,2.4,2.5,4.5,1.9c1.8-0.5,3.6-1.5,4.8-2.6l-0.8,5.9C83.9,24,82.4,24.7,80.5,25.3"></path><path d="M96,10l0,10.7l-6.4,1.7l0-19.1l4.7-1.3L95.8,4c1.5-2.5,3.2-3.5,4.9-4l0,7.9C99.1,8.4,97.5,9.1,96,10"></path><polygon points="104.5,6.3 112.6,4.1 112.6,7.1 104.5,9.2"></polygon><polygon points="15.5,45.6 15.5,59.7 4.6,48.5 0,49.7 0,76.9 6.6,75.1 6.7,60.7 17.6,72.1 22.1,70.9 22.1,43.8"></polygon><path d="M35.8,61.6c0.6-0.2,1.1-0.4,1.6-0.9l0-7.3c-0.7-0.1-1.3,0-2.1,0.2c-3.1,0.8-3.9,3.2-3.2,5.7 C32.7,61.5,33.9,62.1,35.8,61.6 M39.1,64.9c-1.1,1.5-2.6,2.6-4.5,3.1c-3.7,1-7.3-0.6-8.8-5.9c-1.7-6.3,1.1-12,7.5-13.7 c2.3-0.6,4.4-0.5,6.1,0.2l1-1.7l3.5-0.9l0,19.1l-3.6,1L39.1,64.9z"></path><path d="M54.8,62.5c-3,0.8-5.4,0.3-6.4-3.4C48.2,58,48,56.5,48,54.6l0-4l-1.6,0.4l0-5.7l1.6-0.4l0-5.4l6.4-1.7 l0,5.4l3.1-0.8l0,5.7l-3.1,0.8l0,5.1c0,0.4,0,0.6,0.1,0.9c0.2,0.8,0.8,1,1.8,0.7c0.4-0.1,0.8-0.3,1.3-0.5l-0.5,6.4 C56.4,62,55.6,62.3,54.8,62.5"></path><path d="M67.3,48.1l0,10.7l-6.4,1.7l0-19.1l4.7-1.3l1.5,1.8c1.5-2.5,3.2-3.5,4.9-4l0,7.9 C70.3,46.5,68.8,47.2,67.3,48.1"></path><path d="M86,43.3c-0.5-1.9-1.7-2.7-3.4-2.3c-2.2,0.6-3.2,3-2.4,5.7c0.6,2.1,1.9,2.8,3.4,2.4 C85.8,48.5,86.7,46,86,43.3 M73.9,49.2c-1.6-5.9,1.3-12,8.1-13.9c5.5-1.5,9.1,0.9,10.3,5.4c1.5,5.6-0.9,12-8,13.9 C78.9,56.2,75.2,54.1,73.9,49.2"></path><path d="M101.8,37l0,12.6l-6.4,1.7l0-19.1l3.7-1l2,1.9c1.1-2.3,2.8-3.6,4.6-4.1c2.9-0.8,5.3,0.5,6.3,4.1 c0.3,1.3,0.6,3.3,0.6,5.6l0,7.9l-6.4,1.7l0-8.3c0-1.1,0-2.1-0.2-2.9c-0.3-1.3-1.1-1.5-2.2-1.2C103.2,36.1,102.6,36.4,101.8,37"></path><path d="M117.2,30.5v-2h0.6c0.7,0,1,0.4,1,1c0,0.6-0.4,1-1,1H117.2z M117.2,31.1h0.7c0.1,0,0.2,0,0.3,0l0.7,1.2h0.9 l-1-1.6c0.4-0.3,0.6-0.8,0.6-1.3c0-1-0.7-1.6-1.7-1.6h-1.4v4.5h0.8V31.1z M117.9,33.5c-1.9,0-3.2-1.1-3.2-3.4 c0-2.1,1.4-3.3,3.2-3.3c1.9,0,3.2,1.2,3.2,3.4C121.1,32.3,119.8,33.5,117.9,33.5 M117.8,34.2c2.4,0,4-1.5,4-4.1 c0-2.5-1.6-4.1-4-4.1c-2.3,0-4,1.6-4,4.1C113.8,32.7,115.4,34.2,117.8,34.2"></path></g>`,1)],8,a))}};export{o as t};
+import{C as e,f as t,lt as n,s as r,u as i}from"./runtime-core.esm-bundler-BD0e4RlP.js";var a=[`aria-label`],o={__name:`Logo`,props:{title:{type:String,default:`Kaiser Natron`}},setup(o){return(s,c)=>(e(),i(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 121.9 76.9`,role:`img`,"aria-label":o.title,fill:`currentColor`},[r(`title`,null,n(o.title),1),c[0]||=t(`<g><polygon points="13.8,15.6 6.7,28.7 6.7,17.5 0,19.3 0,46.4 6.8,44.6 6.7,38.4 9.8,33.3 15.3,42.4 22.4,40.4 14.1,25.9 21.3,13.6"></polygon><path d="M33.1,32c0.6-0.2,1.1-0.4,1.6-0.9l0-7.3c-0.7-0.1-1.3,0-2.1,0.2c-3.1,0.8-3.9,3.2-3.2,5.7 C29.9,31.8,31.2,32.5,33.1,32 M36.3,35.3c-1.1,1.5-2.6,2.6-4.5,3.1c-3.7,1-7.3-0.6-8.8-5.9c-1.7-6.3,1.1-12,7.5-13.7 c2.3-0.6,4.4-0.5,6.1,0.2l1-1.7l3.5-0.9l0,19.1l-3.6,1L36.3,35.3z"></path><path d="M44.9,15.4l6.4-1.7l0,19.1l-6.4,1.7L44.9,15.4z M44.7,5.9l6.6-1.8l0,6.6l-6.7,1.8L44.7,5.9z"></path><path d="M55.6,29.9l-1.3-6.1c2.6,1.1,5.3,1.7,7.2,1.2c0.8-0.2,1.1-0.7,1-1.3c-0.1-0.5-0.6-0.7-2.2-1.1l-0.4-0.1 c-2.9-0.6-4.5-1.8-5.1-4.1c-0.9-3.3,1.1-6.7,5.4-7.8c2.4-0.6,4.9-0.6,6.9,0l0.2,5.6c-1.7-0.7-3.9-0.9-5.1-0.6 c-1,0.3-1.4,0.8-1.2,1.5c0.1,0.4,0.5,0.7,2,1l0.5,0.1c3,0.7,4.3,1.7,4.9,3.8c1,3.6-1.4,6.7-5.6,7.9C60,30.8,57.6,30.8,55.6,29.9"></path><path d="M76.4,14.7l5.4-1.4c-0.6-1.8-1.7-2.5-3-2.1C77.4,11.5,76.5,12.8,76.4,14.7 M80.5,25.3 c-4.5,1.2-8.6,0.2-10.1-5.4c-1.8-6.5,1.7-12.3,7.2-13.8c4.8-1.3,7.8,1.1,9.1,6.1c0.2,0.7,0.4,1.6,0.4,2.4l-10.4,2.8 c0.8,2.3,2.4,2.5,4.5,1.9c1.8-0.5,3.6-1.5,4.8-2.6l-0.8,5.9C83.9,24,82.4,24.7,80.5,25.3"></path><path d="M96,10l0,10.7l-6.4,1.7l0-19.1l4.7-1.3L95.8,4c1.5-2.5,3.2-3.5,4.9-4l0,7.9C99.1,8.4,97.5,9.1,96,10"></path><polygon points="104.5,6.3 112.6,4.1 112.6,7.1 104.5,9.2"></polygon><polygon points="15.5,45.6 15.5,59.7 4.6,48.5 0,49.7 0,76.9 6.6,75.1 6.7,60.7 17.6,72.1 22.1,70.9 22.1,43.8"></polygon><path d="M35.8,61.6c0.6-0.2,1.1-0.4,1.6-0.9l0-7.3c-0.7-0.1-1.3,0-2.1,0.2c-3.1,0.8-3.9,3.2-3.2,5.7 C32.7,61.5,33.9,62.1,35.8,61.6 M39.1,64.9c-1.1,1.5-2.6,2.6-4.5,3.1c-3.7,1-7.3-0.6-8.8-5.9c-1.7-6.3,1.1-12,7.5-13.7 c2.3-0.6,4.4-0.5,6.1,0.2l1-1.7l3.5-0.9l0,19.1l-3.6,1L39.1,64.9z"></path><path d="M54.8,62.5c-3,0.8-5.4,0.3-6.4-3.4C48.2,58,48,56.5,48,54.6l0-4l-1.6,0.4l0-5.7l1.6-0.4l0-5.4l6.4-1.7 l0,5.4l3.1-0.8l0,5.7l-3.1,0.8l0,5.1c0,0.4,0,0.6,0.1,0.9c0.2,0.8,0.8,1,1.8,0.7c0.4-0.1,0.8-0.3,1.3-0.5l-0.5,6.4 C56.4,62,55.6,62.3,54.8,62.5"></path><path d="M67.3,48.1l0,10.7l-6.4,1.7l0-19.1l4.7-1.3l1.5,1.8c1.5-2.5,3.2-3.5,4.9-4l0,7.9 C70.3,46.5,68.8,47.2,67.3,48.1"></path><path d="M86,43.3c-0.5-1.9-1.7-2.7-3.4-2.3c-2.2,0.6-3.2,3-2.4,5.7c0.6,2.1,1.9,2.8,3.4,2.4 C85.8,48.5,86.7,46,86,43.3 M73.9,49.2c-1.6-5.9,1.3-12,8.1-13.9c5.5-1.5,9.1,0.9,10.3,5.4c1.5,5.6-0.9,12-8,13.9 C78.9,56.2,75.2,54.1,73.9,49.2"></path><path d="M101.8,37l0,12.6l-6.4,1.7l0-19.1l3.7-1l2,1.9c1.1-2.3,2.8-3.6,4.6-4.1c2.9-0.8,5.3,0.5,6.3,4.1 c0.3,1.3,0.6,3.3,0.6,5.6l0,7.9l-6.4,1.7l0-8.3c0-1.1,0-2.1-0.2-2.9c-0.3-1.3-1.1-1.5-2.2-1.2C103.2,36.1,102.6,36.4,101.8,37"></path><path d="M117.2,30.5v-2h0.6c0.7,0,1,0.4,1,1c0,0.6-0.4,1-1,1H117.2z M117.2,31.1h0.7c0.1,0,0.2,0,0.3,0l0.7,1.2h0.9 l-1-1.6c0.4-0.3,0.6-0.8,0.6-1.3c0-1-0.7-1.6-1.7-1.6h-1.4v4.5h0.8V31.1z M117.9,33.5c-1.9,0-3.2-1.1-3.2-3.4 c0-2.1,1.4-3.3,3.2-3.3c1.9,0,3.2,1.2,3.2,3.4C121.1,32.3,119.8,33.5,117.9,33.5 M117.8,34.2c2.4,0,4-1.5,4-4.1 c0-2.5-1.6-4.1-4-4.1c-2.3,0-4,1.6-4,4.1C113.8,32.7,115.4,34.2,117.8,34.2"></path></g>`,1)],8,a))}};export{o as t};

dist/assets/LogoSection-Ck9P81sR.js

@@ -1 +1 @@
-import{A as e,S as t,W as n,c as r,ct as i,m as a,s as o}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as s}from"./Logo-DKfw78Bp.js";import{t as c}from"./i18n-BxXwPz8H.js";import{t as l}from"./SectionShell-CHsfR9Y3.js";var u={class:`eyebrow mb-5`},d={class:`grid md:grid-cols-3 gap-4`},f={class:`rounded-md border border-line bg-paper p-10 flex flex-col items-center gap-4`},p={class:`font-mono text-[11px] text-muted`},m={class:`rounded-md border border-line bg-cream p-10 flex flex-col items-center gap-4`},h={class:`font-mono text-[11px] text-muted`},g={class:`rounded-md bg-brand p-10 flex flex-col items-center gap-4`},_={class:`font-mono text-[11px] text-cream opacity-70`},v={class:`eyebrow mb-5`},y={class:`rounded-md border border-line bg-paper p-10 flex items-end gap-10 flex-wrap`},b={class:`flex flex-col items-center gap-3`},x={class:`flex flex-col items-center gap-3`},S={class:`flex flex-col items-center gap-3`},C={class:`eyebrow mb-5`},w={class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},T={class:`mb-2 text-muted`},E={__name:`LogoSection`,setup(E){let{t:D}=c();return(c,E)=>(t(),r(l,{eyebrow:n(D)(`ds.eyebrow.brand`),title:n(D)(`ds.logo.title`),description:n(D)(`ds.logo.description`)},{default:e(()=>[o(`section`,null,[o(`h2`,u,i(n(D)(`ds.heading.onDifferentSurfaces`)),1),o(`div`,d,[o(`div`,f,[a(s,{class:`w-40 h-auto text-brand`}),o(`code`,p,i(n(D)(`ds.cards.paper`)),1)]),o(`div`,m,[a(s,{class:`w-40 h-auto text-brand`}),o(`code`,h,i(n(D)(`ds.cards.cream`)),1)]),o(`div`,g,[a(s,{class:`w-40 h-auto text-paper`}),o(`code`,_,i(n(D)(`ds.cards.brand`)),1)])])]),o(`section`,null,[o(`h2`,v,i(n(D)(`ds.heading.sizes`)),1),o(`div`,y,[o(`div`,b,[a(s,{class:`w-16 h-auto text-brand`}),E[0]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-16`,-1)]),o(`div`,x,[a(s,{class:`w-32 h-auto text-brand`}),E[1]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-32`,-1)]),o(`div`,S,[a(s,{class:`w-60 h-auto text-brand`}),E[2]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-60`,-1)])])]),o(`section`,null,[o(`h2`,C,i(n(D)(`ds.heading.usage`)),1),o(`div`,w,[o(`p`,T,i(n(D)(`ds.logo.usageIntro`)),1),E[3]||=o(`pre`,{class:`whitespace-pre-wrap`},`<Logo class="w-60 h-auto text-brand" />`,-1)])])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{E as default};
+import{C as e,G as t,c as n,j as r,lt as i,m as a,s as o}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as s}from"./Logo-FFBeOKwm.js";import{t as c}from"./i18n-C5xQ6LQM.js";import{t as l}from"./SectionShell-BEISUYi8.js";var u={class:`eyebrow mb-5`},d={class:`grid md:grid-cols-3 gap-4`},f={class:`rounded-md border border-line bg-paper p-10 flex flex-col items-center gap-4`},p={class:`font-mono text-[11px] text-muted`},m={class:`rounded-md border border-line bg-cream p-10 flex flex-col items-center gap-4`},h={class:`font-mono text-[11px] text-muted`},g={class:`rounded-md bg-brand p-10 flex flex-col items-center gap-4`},_={class:`font-mono text-[11px] text-cream opacity-70`},v={class:`eyebrow mb-5`},y={class:`rounded-md border border-line bg-paper p-10 flex items-end gap-10 flex-wrap`},b={class:`flex flex-col items-center gap-3`},x={class:`flex flex-col items-center gap-3`},S={class:`flex flex-col items-center gap-3`},C={class:`eyebrow mb-5`},w={class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},T={class:`mb-2 text-muted`},E={__name:`LogoSection`,setup(E){let{t:D}=c();return(c,E)=>(e(),n(l,{eyebrow:t(D)(`ds.eyebrow.brand`),title:t(D)(`ds.logo.title`),description:t(D)(`ds.logo.description`)},{default:r(()=>[o(`section`,null,[o(`h2`,u,i(t(D)(`ds.heading.onDifferentSurfaces`)),1),o(`div`,d,[o(`div`,f,[a(s,{class:`w-40 h-auto text-brand`}),o(`code`,p,i(t(D)(`ds.cards.paper`)),1)]),o(`div`,m,[a(s,{class:`w-40 h-auto text-brand`}),o(`code`,h,i(t(D)(`ds.cards.cream`)),1)]),o(`div`,g,[a(s,{class:`w-40 h-auto text-paper`}),o(`code`,_,i(t(D)(`ds.cards.brand`)),1)])])]),o(`section`,null,[o(`h2`,v,i(t(D)(`ds.heading.sizes`)),1),o(`div`,y,[o(`div`,b,[a(s,{class:`w-16 h-auto text-brand`}),E[0]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-16`,-1)]),o(`div`,x,[a(s,{class:`w-32 h-auto text-brand`}),E[1]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-32`,-1)]),o(`div`,S,[a(s,{class:`w-60 h-auto text-brand`}),E[2]||=o(`code`,{class:`font-mono text-[11px] text-muted`},`w-60`,-1)])])]),o(`section`,null,[o(`h2`,C,i(t(D)(`ds.heading.usage`)),1),o(`div`,w,[o(`p`,T,i(t(D)(`ds.logo.usageIntro`)),1),E[3]||=o(`pre`,{class:`whitespace-pre-wrap`},`<Logo class="w-60 h-auto text-brand" />`,-1)])])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{E as default};

dist/assets/NavbarPreview-CL9oCBw4.js

@@ -1 +0,0 @@
-import{S as e,m as t,o as n,r,s as i,st as a,u as o,w as s}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{a as c}from"./vue-router-BUTR8NmK.js";import{t as l}from"./Navbar-JEFiizrv.js";var u={class:`min-h-screen bg-surface`},d={class:`max-w-5xl mx-auto px-6 py-16 space-y-6`},f={__name:`NavbarPreview`,setup(f){let p=c(),m=n(()=>{let e=p.query.variant;return[`paper`,`cream`,`brand`].includes(e)?e:`paper`}),h=n(()=>p.query.layout===`floating`?`floating`:`standard`);return(n,c)=>(e(),o(`div`,u,[t(l,{variant:m.value,layout:h.value,"cart-count":2},null,8,[`variant`,`layout`]),i(`div`,d,[(e(),o(r,null,s([40,28,40,32,40,28,36,40],e=>i(`div`,{key:e,class:`rounded-md border border-line bg-paper`,style:a({height:e*4+`px`})},null,4)),64))])]))}};export{f as default};

dist/assets/NavbarPreview-CmqY2fO6.js

@@ -0,0 +1 @@
+import{C as e,T as t,ct as n,m as r,o as i,r as a,s as o,u as s}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{a as c}from"./vue-router-QRVDVSxc.js";import{t as l}from"./Navbar-CeWNSArx.js";var u={class:`min-h-screen bg-surface`},d={class:`max-w-5xl mx-auto px-6 py-16 space-y-6`},f={__name:`NavbarPreview`,setup(f){let p=c(),m=i(()=>{let e=p.query.variant;return[`paper`,`cream`,`brand`].includes(e)?e:`paper`}),h=i(()=>p.query.layout===`floating`?`floating`:`standard`);return(i,c)=>(e(),s(`div`,u,[r(l,{variant:m.value,layout:h.value,"cart-count":2},null,8,[`variant`,`layout`]),o(`div`,d,[(e(),s(a,null,t([40,28,40,32,40,28,36,40],e=>o(`div`,{key:e,class:`rounded-md border border-line bg-paper`,style:n({height:e*4+`px`})},null,4)),64))])]))}};export{f as default};

dist/assets/NavbarSection-APxiDb5S.js

@@ -1,8 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,m as a,o,ot as s,p as c,r as l,s as u,st as d,u as f,w as p,z as m}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as h}from"./i18n-BxXwPz8H.js";import{t as g}from"./SectionShell-CHsfR9Y3.js";import{t as _}from"./DevicePreview-Dj1SP-lv.js";var v=[`aria-label`],y=[`aria-selected`,`onClick`],b=[`aria-label`],x=[`aria-selected`,`onClick`],S={class:`eyebrow mb-5`},C={__name:`NavbarSection`,setup(C){let{t:w}=h(),T=o(()=>[{id:`paper`,label:w(`ds.navbar.tone.paper`),swatch:`#ffffff`},{id:`cream`,label:w(`ds.navbar.tone.cream`),swatch:`var(--color-cream)`},{id:`brand`,label:w(`ds.navbar.tone.brand`),swatch:`var(--color-brand)`}]),E=o(()=>[{id:`standard`,label:w(`ds.navbar.layout.standard`)},{id:`floating`,label:w(`ds.navbar.layout.floating`)}]),D=m(`paper`),O=m(`standard`),k=o(()=>`/design/preview/navbar?variant=${D.value}&layout=${O.value}`);return(o,m)=>(t(),r(g,{eyebrow:n(w)(`ds.eyebrow.components`),title:n(w)(`ds.navbar.title`),description:n(w)(`ds.navbar.description`),wide:``},{default:e(()=>[u(`section`,null,[a(_,{src:k.value,initial:`mobile`,height:720},{controls:e(()=>[u(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.layout`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),f(l,null,p(E.value,e=>(t(),f(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":O.value===e.id,class:s([`px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,O.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>O.value=e.id},i(e.label),11,y))),128))],8,v),u(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.tone`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),f(l,null,p(T.value,e=>(t(),f(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":D.value===e.id,class:s([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,D.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>D.value=e.id},[u(`span`,{class:`w-2.5 h-2.5 rounded-full border border-line-strong`,style:d({backgroundColor:e.swatch})},null,4),c(` `+i(e.label),1)],10,x))),128))],8,b)]),_:1},8,[`src`])]),u(`section`,null,[u(`h2`,S,i(n(w)(`ds.heading.usage`)),1),m[0]||=u(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[u(`pre`,{class:`whitespace-pre-wrap`},`<Navbar
-  variant="paper"
-  layout="floating"
-  :items="[{ key: 'nav.shop', href: '/shop' }]"
-  :cart-count="2"
-  @cart="openCart"
-  @nav="onNav"
-/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{C as default};

dist/assets/NavbarSection-S8lg6jJX.js

@@ -0,0 +1,8 @@
+import{B as e,C as t,G as n,T as r,c as i,ct as a,j as o,lt as s,m as c,o as l,p as u,r as d,s as f,st as p,u as m}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as h}from"./i18n-C5xQ6LQM.js";import{t as g}from"./SectionShell-BEISUYi8.js";import{t as _}from"./DevicePreview-DvIWByfU.js";var v=[`aria-label`],y=[`aria-selected`,`onClick`],b=[`aria-label`],x=[`aria-selected`,`onClick`],S={class:`eyebrow mb-5`},C={__name:`NavbarSection`,setup(C){let{t:w}=h(),T=l(()=>[{id:`paper`,label:w(`ds.navbar.tone.paper`),swatch:`#ffffff`},{id:`cream`,label:w(`ds.navbar.tone.cream`),swatch:`var(--color-cream)`},{id:`brand`,label:w(`ds.navbar.tone.brand`),swatch:`var(--color-brand)`}]),E=l(()=>[{id:`standard`,label:w(`ds.navbar.layout.standard`)},{id:`floating`,label:w(`ds.navbar.layout.floating`)}]),D=e(`paper`),O=e(`standard`),k=l(()=>`/design/preview/navbar?variant=${D.value}&layout=${O.value}`);return(e,l)=>(t(),i(g,{eyebrow:n(w)(`ds.eyebrow.components`),title:n(w)(`ds.navbar.title`),description:n(w)(`ds.navbar.description`),wide:``},{default:o(()=>[f(`section`,null,[c(_,{src:k.value,initial:`mobile`,height:720},{controls:o(()=>[f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.layout`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),m(d,null,r(E.value,e=>(t(),m(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":O.value===e.id,class:p([`px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,O.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>O.value=e.id},s(e.label),11,y))),128))],8,v),f(`div`,{role:`tablist`,"aria-label":n(w)(`ds.navbar.tone`),class:`inline-flex items-center p-1 gap-0.5 rounded-pill border border-line bg-paper`},[(t(!0),m(d,null,r(T.value,e=>(t(),m(`button`,{key:e.id,type:`button`,role:`tab`,"aria-selected":D.value===e.id,class:p([`inline-flex items-center gap-2 px-3 py-1.5 text-[12px] font-semibold tracking-label rounded-pill transition-colors duration-base`,D.value===e.id?`bg-brand text-accent`:`text-muted hover:text-brand`]),onClick:t=>D.value=e.id},[f(`span`,{class:`w-2.5 h-2.5 rounded-full border border-line-strong`,style:a({backgroundColor:e.swatch})},null,4),u(` `+s(e.label),1)],10,x))),128))],8,b)]),_:1},8,[`src`])]),f(`section`,null,[f(`h2`,S,s(n(w)(`ds.heading.usage`)),1),l[0]||=f(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[f(`pre`,{class:`whitespace-pre-wrap`},`<Navbar
+  variant="paper"
+  layout="floating"
+  :items="[{ key: 'nav.shop', href: '/shop' }]"
+  :cart-count="2"
+  @cart="openCart"
+  @nav="onNav"
+/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{C as default};

dist/assets/ProductsSection-DsaABBea.js

@@ -1,11 +0,0 @@
-import{A as e,D as t,S as n,W as r,c as i,ct as a,l as o,m as s,o as c,ot as l,p as u,s as d,u as f,z as p}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as m}from"./Icon-D1Ud4H_f.js";import{t as h}from"./i18n-BxXwPz8H.js";import{t as g}from"./Badge-D2T2EdKQ.js";import{t as _}from"./Button-CajVMpo0.js";import{t as v}from"./SectionShell-CHsfR9Y3.js";var y=[`src`,`alt`],b={class:`flex flex-col gap-3 p-6`},x={class:`flex flex-col gap-1`},S={key:0,class:`text-sm text-muted tracking-label`},C={class:`mt-auto flex items-center justify-between gap-3 pt-2`},w={class:`font-display text-2xl font-normal text-brand`},T={key:0,class:`text-xs font-semibold tracking-label uppercase text-danger`},E={__name:`ProductCard`,props:{title:{type:String,required:!0},size:{type:String,default:``},price:{type:[String,Number],required:!0},currency:{type:String,default:`€`},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`].includes(e)},inStock:{type:Boolean,default:!0},href:{type:String,default:``}},emits:[`add`],setup(p){let v=p,{t:E}=h(),D={paper:{surface:`bg-paper`,media:`bg-cream`,border:`border-line`},cream:{surface:`bg-cream`,media:`bg-paper`,border:`border-line`}},O=c(()=>D[v.tone]),k=c(()=>typeof v.price==`number`?`${v.currency} ${v.price.toFixed(2).replace(`.`,`,`)}`:`${v.currency} ${v.price}`);return(c,h)=>(n(),f(`article`,{class:l([`group flex flex-col overflow-hidden rounded-md border transition-all duration-base ease-out`,O.value.surface,O.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[(n(),i(t(p.href?`a`:`div`),{href:p.href||null,class:l([`relative block aspect-[4/5] overflow-hidden`,O.value.media])},{default:e(()=>[p.badge?(n(),i(g,{key:0,variant:p.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:e(()=>[u(a(p.badge),1)]),_:1},8,[`variant`])):o(``,!0),d(`img`,{src:p.image,alt:p.imageAlt||p.title,loading:`lazy`,decoding:`async`,class:`absolute inset-0 w-full h-full object-contain p-8 transition-transform duration-slow ease-out group-hover:scale-105`},null,8,y)]),_:1},8,[`href`,`class`])),d(`div`,b,[d(`div`,x,[(n(),i(t(p.href?`a`:`h3`),{href:p.href||null,class:l([`font-display text-xl font-normal leading-tight text-ink`,p.href?`hover:text-brand transition-colors duration-base`:``])},{default:e(()=>[u(a(p.title),1)]),_:1},8,[`href`,`class`])),p.size?(n(),f(`p`,S,a(p.size),1)):o(``,!0)]),d(`div`,C,[d(`span`,w,a(k.value),1),p.inStock?o(``,!0):(n(),f(`span`,T,a(r(E)(`ds.product.outOfStock`)),1))]),s(_,{variant:`primary`,size:`md`,block:``,disabled:!p.inStock,onClick:h[0]||=e=>c.$emit(`add`)},{before:e(()=>[s(m,{name:`plus`,size:16})]),default:e(()=>[u(` `+a(r(E)(`ds.buttons.addToCart`)),1)]),_:1},8,[`disabled`])])],2))}},D={class:`eyebrow mb-5`},O={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},k={key:0,class:`mt-5 text-sm text-muted`},A={class:`font-mono text-[12px]`},j={class:`eyebrow mb-5`},M={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},N={class:`eyebrow mb-5`},P=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,F={__name:`ProductsSection`,setup(t){let{t:c}=h(),l=p(``);function m(e){l.value=e,setTimeout(()=>{l.value===e&&(l.value=``)},2e3)}return(t,p)=>(n(),i(v,{eyebrow:r(c)(`ds.eyebrow.components`),title:r(c)(`ds.product.title`),description:r(c)(`ds.product.description`)},{default:e(()=>[d(`section`,null,[d(`h2`,D,a(r(c)(`ds.heading.default`)),1),d(`div`,O,[s(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,href:`#`,onAdd:p[0]||=e=>m(`pulver-250`)}),s(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,badge:r(c)(`ds.badges.featured`),"badge-variant":`accent`,href:`#`,onAdd:p[1]||=e=>m(`pulver-250-featured`)},null,8,[`badge`]),s(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,tone:`cream`,href:`#`,onAdd:p[2]||=e=>m(`pulver-250-cream`)})]),l.value?(n(),f(`p`,k,[u(a(r(c)(`ds.product.added`))+`: `,1),d(`code`,A,a(l.value),1)])):o(``,!0)]),d(`section`,null,[d(`h2`,j,a(r(c)(`ds.heading.states`)),1),d(`div`,M,[s(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,"in-stock":!1}),s(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,badge:r(c)(`ds.badges.newRelease`),"badge-variant":`brand`,href:`#`},null,8,[`badge`])])]),d(`section`,null,[d(`h2`,N,a(r(c)(`ds.heading.usage`)),1),p[3]||=d(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[d(`pre`,{class:`whitespace-pre-wrap`},`<ProductCard
-  title="Kaiser-Natron® Pulver"
-  size="250 g Großpackung"
-  :price="4.49"
-  image="/products/cutouts/…-removebg-preview.png"
-  badge="Bestseller"
-  badge-variant="accent"
-  tone="paper"
-  href="/kaiser-natron-pulver-250-g-grosspackung"
-  @add="addToCart(sku)"
-/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{F as default};

dist/assets/ProductsSection-mQIT4pOM.js

@@ -0,0 +1,11 @@
+import{B as e,C as t,G as n,O as r,c as i,j as a,l as o,lt as s,m as c,o as l,p as u,s as d,st as f,u as p}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as m}from"./Icon-BCRRMV3J.js";import{t as h}from"./i18n-C5xQ6LQM.js";import{t as g}from"./Badge-DcvgVKep.js";import{t as _}from"./Button-DkdaDkuf.js";import{t as v}from"./SectionShell-BEISUYi8.js";var y=[`src`,`alt`],b={class:`flex flex-col gap-3 p-6`},x={class:`flex flex-col gap-1`},S={key:0,class:`text-sm text-muted tracking-label`},C={class:`mt-auto flex items-center justify-between gap-3 pt-2`},w={class:`font-display text-2xl font-normal text-brand`},T={key:0,class:`text-xs font-semibold tracking-label uppercase text-danger`},E={__name:`ProductCard`,props:{title:{type:String,required:!0},size:{type:String,default:``},price:{type:[String,Number],required:!0},currency:{type:String,default:`€`},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`].includes(e)},inStock:{type:Boolean,default:!0},href:{type:String,default:``}},emits:[`add`],setup(e){let v=e,{t:E}=h(),D={paper:{surface:`bg-paper`,media:`bg-cream`,border:`border-line`},cream:{surface:`bg-cream`,media:`bg-paper`,border:`border-line`}},O=l(()=>D[v.tone]),k=l(()=>typeof v.price==`number`?`${v.currency} ${v.price.toFixed(2).replace(`.`,`,`)}`:`${v.currency} ${v.price}`);return(l,h)=>(t(),p(`article`,{class:f([`group flex flex-col overflow-hidden rounded-md border transition-all duration-base ease-out`,O.value.surface,O.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[(t(),i(r(e.href?`a`:`div`),{href:e.href||null,class:f([`relative block aspect-[4/5] overflow-hidden`,O.value.media])},{default:a(()=>[e.badge?(t(),i(g,{key:0,variant:e.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:a(()=>[u(s(e.badge),1)]),_:1},8,[`variant`])):o(``,!0),d(`img`,{src:e.image,alt:e.imageAlt||e.title,loading:`lazy`,decoding:`async`,class:`absolute inset-0 w-full h-full object-contain p-8 transition-transform duration-slow ease-out group-hover:scale-105`},null,8,y)]),_:1},8,[`href`,`class`])),d(`div`,b,[d(`div`,x,[(t(),i(r(e.href?`a`:`h3`),{href:e.href||null,class:f([`font-display text-xl font-normal leading-tight text-ink`,e.href?`hover:text-brand transition-colors duration-base`:``])},{default:a(()=>[u(s(e.title),1)]),_:1},8,[`href`,`class`])),e.size?(t(),p(`p`,S,s(e.size),1)):o(``,!0)]),d(`div`,C,[d(`span`,w,s(k.value),1),e.inStock?o(``,!0):(t(),p(`span`,T,s(n(E)(`ds.product.outOfStock`)),1))]),c(_,{variant:`primary`,size:`md`,block:``,disabled:!e.inStock,onClick:h[0]||=e=>l.$emit(`add`)},{before:a(()=>[c(m,{name:`plus`,size:16})]),default:a(()=>[u(` `+s(n(E)(`ds.buttons.addToCart`)),1)]),_:1},8,[`disabled`])])],2))}},D={class:`eyebrow mb-5`},O={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},k={key:0,class:`mt-5 text-sm text-muted`},A={class:`font-mono text-[12px]`},j={class:`eyebrow mb-5`},M={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},N={class:`eyebrow mb-5`},P=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview.png`,F={__name:`ProductsSection`,setup(r){let{t:l}=h(),f=e(``);function m(e){f.value=e,setTimeout(()=>{f.value===e&&(f.value=``)},2e3)}return(e,r)=>(t(),i(v,{eyebrow:n(l)(`ds.eyebrow.components`),title:n(l)(`ds.product.title`),description:n(l)(`ds.product.description`)},{default:a(()=>[d(`section`,null,[d(`h2`,D,s(n(l)(`ds.heading.default`)),1),d(`div`,O,[c(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,href:`#`,onAdd:r[0]||=e=>m(`pulver-250`)}),c(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,badge:n(l)(`ds.badges.featured`),"badge-variant":`accent`,href:`#`,onAdd:r[1]||=e=>m(`pulver-250-featured`)},null,8,[`badge`]),c(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,tone:`cream`,href:`#`,onAdd:r[2]||=e=>m(`pulver-250-cream`)})]),f.value?(t(),p(`p`,k,[u(s(n(l)(`ds.product.added`))+`: `,1),d(`code`,A,s(f.value),1)])):o(``,!0)]),d(`section`,null,[d(`h2`,j,s(n(l)(`ds.heading.states`)),1),d(`div`,M,[c(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,"in-stock":!1}),c(E,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:P,badge:n(l)(`ds.badges.newRelease`),"badge-variant":`brand`,href:`#`},null,8,[`badge`])])]),d(`section`,null,[d(`h2`,N,s(n(l)(`ds.heading.usage`)),1),r[3]||=d(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[d(`pre`,{class:`whitespace-pre-wrap`},`<ProductCard
+  title="Kaiser-Natron® Pulver"
+  size="250 g Großpackung"
+  :price="4.49"
+  image="/products/cutouts/…-removebg-preview.png"
+  badge="Bestseller"
+  badge-variant="accent"
+  tone="paper"
+  href="/kaiser-natron-pulver-250-g-grosspackung"
+  @add="addToCart(sku)"
+/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{F as default};

dist/assets/QuantityStepper-Bjh3X3wE.js

@@ -1 +1 @@
-import{S as e,ct as t,m as n,o as r,ot as i,s as a,u as o}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as s}from"./Icon-D1Ud4H_f.js";var c={class:`inline-flex items-center rounded-pill border border-line bg-paper font-sans`},l=[`disabled`,`aria-label`],u=[`disabled`,`aria-label`],d={__name:`QuantityStepper`,props:{modelValue:{type:Number,required:!0},min:{type:Number,default:0},max:{type:Number,default:1/0},disabled:{type:Boolean,default:!1},size:{type:String,default:`md`,validator:e=>[`sm`,`md`].includes(e)},decreaseLabel:{type:String,default:`Decrease`},increaseLabel:{type:String,default:`Increase`}},emits:[`update:modelValue`,`decrease`,`increase`],setup(d,{emit:f}){let p=d,m=f,h={sm:{btn:`w-8 h-8`,icon:14,label:`text-[13px]`},md:{btn:`w-9 h-9`,icon:16,label:`text-[14px]`}},g=r(()=>h[p.size]),_=r(()=>!p.disabled&&p.modelValue>p.min),v=r(()=>!p.disabled&&p.modelValue<p.max);function y(){if(!_.value)return;let e=p.modelValue-1;m(`update:modelValue`,e),m(`decrease`,e)}function b(){if(!v.value)return;let e=p.modelValue+1;m(`update:modelValue`,e),m(`increase`,e)}return(r,f)=>(e(),o(`div`,c,[a(`button`,{type:`button`,class:i([g.value.btn,`inline-flex items-center justify-center rounded-l-pill text-brand transition-colors`,`hover:bg-brand-wash disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent`]),disabled:!_.value,"aria-label":d.decreaseLabel,onClick:y},[n(s,{name:`minus`,size:g.value.icon},null,8,[`size`])],10,l),a(`span`,{class:i([`min-w-[2ch] px-2 font-semibold text-ink tabular-nums text-center`,g.value.label]),"aria-live":`polite`},t(d.modelValue),3),a(`button`,{type:`button`,class:i([g.value.btn,`inline-flex items-center justify-center rounded-r-pill text-brand transition-colors`,`hover:bg-brand-wash disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent`]),disabled:!v.value,"aria-label":d.increaseLabel,onClick:b},[n(s,{name:`plus`,size:g.value.icon},null,8,[`size`])],10,u)]))}};export{d as t};
+import{C as e,lt as t,m as n,o as r,s as i,st as a,u as o}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as s}from"./Icon-BCRRMV3J.js";var c={class:`inline-flex items-center rounded-pill border border-line bg-paper font-sans`},l=[`disabled`,`aria-label`],u=[`disabled`,`aria-label`],d={__name:`QuantityStepper`,props:{modelValue:{type:Number,required:!0},min:{type:Number,default:0},max:{type:Number,default:1/0},disabled:{type:Boolean,default:!1},size:{type:String,default:`md`,validator:e=>[`sm`,`md`].includes(e)},decreaseLabel:{type:String,default:`Decrease`},increaseLabel:{type:String,default:`Increase`}},emits:[`update:modelValue`,`decrease`,`increase`],setup(d,{emit:f}){let p=d,m=f,h={sm:{btn:`w-8 h-8`,icon:14,label:`text-[13px]`},md:{btn:`w-9 h-9`,icon:16,label:`text-[14px]`}},g=r(()=>h[p.size]),_=r(()=>!p.disabled&&p.modelValue>p.min),v=r(()=>!p.disabled&&p.modelValue<p.max);function y(){if(!_.value)return;let e=p.modelValue-1;m(`update:modelValue`,e),m(`decrease`,e)}function b(){if(!v.value)return;let e=p.modelValue+1;m(`update:modelValue`,e),m(`increase`,e)}return(r,f)=>(e(),o(`div`,c,[i(`button`,{type:`button`,class:a([g.value.btn,`inline-flex items-center justify-center rounded-l-pill text-brand transition-colors`,`hover:bg-brand-wash disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent`]),disabled:!_.value,"aria-label":d.decreaseLabel,onClick:y},[n(s,{name:`minus`,size:g.value.icon},null,8,[`size`])],10,l),i(`span`,{class:a([`min-w-[2ch] px-2 font-semibold text-ink tabular-nums text-center`,g.value.label]),"aria-live":`polite`},t(d.modelValue),3),i(`button`,{type:`button`,class:a([g.value.btn,`inline-flex items-center justify-center rounded-r-pill text-brand transition-colors`,`hover:bg-brand-wash disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent`]),disabled:!v.value,"aria-label":d.increaseLabel,onClick:b},[n(s,{name:`plus`,size:g.value.icon},null,8,[`size`])],10,u)]))}};export{d as t};

dist/assets/QuantityStepperSection-C91b4kgk.js

@@ -1,7 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,m as a,s as o,z as s}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as c}from"./i18n-BxXwPz8H.js";import{t as l}from"./QuantityStepper-BGdR_8YL.js";import{t as u}from"./SectionShell-CHsfR9Y3.js";var d={class:`eyebrow mb-5`},f={class:`flex flex-wrap items-center gap-6`},p={class:`eyebrow mb-5`},m={class:`flex flex-wrap items-center gap-6`},h={class:`flex flex-col gap-2`},g={class:`eyebrow`},_={class:`flex flex-col gap-2`},v={class:`eyebrow`},y={class:`flex flex-col gap-2`},b={class:`eyebrow`},x={class:`eyebrow mb-5`},S={__name:`QuantityStepperSection`,setup(S){let{t:C}=c(),w=s(1),T=s(3),E=s(5),D=s(2);return(s,c)=>(t(),r(u,{eyebrow:n(C)(`ds.eyebrow.components`),title:n(C)(`ds.qtyStepper.title`),description:n(C)(`ds.qtyStepper.description`)},{default:e(()=>[o(`section`,null,[o(`h2`,d,i(n(C)(`ds.heading.sizes`)),1),o(`div`,f,[a(l,{modelValue:w.value,"onUpdate:modelValue":c[0]||=e=>w.value=e,size:`sm`,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`]),a(l,{modelValue:T.value,"onUpdate:modelValue":c[1]||=e=>T.value=e,size:`md`,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])])]),o(`section`,null,[o(`h2`,p,i(n(C)(`ds.heading.states`)),1),o(`div`,m,[o(`div`,h,[o(`span`,g,i(n(C)(`ds.qtyStepper.minBoundary`)),1),a(l,{"model-value":0,min:0,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`decrease-label`,`increase-label`])]),o(`div`,_,[o(`span`,v,i(n(C)(`ds.qtyStepper.maxBoundary`)),1),a(l,{modelValue:E.value,"onUpdate:modelValue":c[2]||=e=>E.value=e,max:5,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])]),o(`div`,y,[o(`span`,b,i(n(C)(`ds.buttons.disabled`)),1),a(l,{modelValue:D.value,"onUpdate:modelValue":c[3]||=e=>D.value=e,disabled:``,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])])])]),o(`section`,null,[o(`h2`,x,i(n(C)(`ds.heading.usage`)),1),c[4]||=o(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[o(`pre`,{class:`whitespace-pre-wrap`},`<QuantityStepper
-  v-model="quantity"
-  :min="0"
-  :max="10"
-  decrease-label="Menge verringern"
-  increase-label="Menge erhöhen"
-/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{S as default};

dist/assets/QuantityStepperSection-prENfe6m.js

@@ -0,0 +1,7 @@
+import{B as e,C as t,G as n,c as r,j as i,lt as a,m as o,s}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as c}from"./i18n-C5xQ6LQM.js";import{t as l}from"./QuantityStepper-Bjh3X3wE.js";import{t as u}from"./SectionShell-BEISUYi8.js";var d={class:`eyebrow mb-5`},f={class:`flex flex-wrap items-center gap-6`},p={class:`eyebrow mb-5`},m={class:`flex flex-wrap items-center gap-6`},h={class:`flex flex-col gap-2`},g={class:`eyebrow`},_={class:`flex flex-col gap-2`},v={class:`eyebrow`},y={class:`flex flex-col gap-2`},b={class:`eyebrow`},x={class:`eyebrow mb-5`},S={__name:`QuantityStepperSection`,setup(S){let{t:C}=c(),w=e(1),T=e(3),E=e(5),D=e(2);return(e,c)=>(t(),r(u,{eyebrow:n(C)(`ds.eyebrow.components`),title:n(C)(`ds.qtyStepper.title`),description:n(C)(`ds.qtyStepper.description`)},{default:i(()=>[s(`section`,null,[s(`h2`,d,a(n(C)(`ds.heading.sizes`)),1),s(`div`,f,[o(l,{modelValue:w.value,"onUpdate:modelValue":c[0]||=e=>w.value=e,size:`sm`,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`]),o(l,{modelValue:T.value,"onUpdate:modelValue":c[1]||=e=>T.value=e,size:`md`,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])])]),s(`section`,null,[s(`h2`,p,a(n(C)(`ds.heading.states`)),1),s(`div`,m,[s(`div`,h,[s(`span`,g,a(n(C)(`ds.qtyStepper.minBoundary`)),1),o(l,{"model-value":0,min:0,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`decrease-label`,`increase-label`])]),s(`div`,_,[s(`span`,v,a(n(C)(`ds.qtyStepper.maxBoundary`)),1),o(l,{modelValue:E.value,"onUpdate:modelValue":c[2]||=e=>E.value=e,max:5,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])]),s(`div`,y,[s(`span`,b,a(n(C)(`ds.buttons.disabled`)),1),o(l,{modelValue:D.value,"onUpdate:modelValue":c[3]||=e=>D.value=e,disabled:``,"decrease-label":n(C)(`cart.qty.decrease`),"increase-label":n(C)(`cart.qty.increase`)},null,8,[`modelValue`,`decrease-label`,`increase-label`])])])]),s(`section`,null,[s(`h2`,x,a(n(C)(`ds.heading.usage`)),1),c[4]||=s(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[s(`pre`,{class:`whitespace-pre-wrap`},`<QuantityStepper
+  v-model="quantity"
+  :min="0"
+  :max="10"
+  decrease-label="Menge verringern"
+  increase-label="Menge erhöhen"
+/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{S as default};

dist/assets/RadiiSection-BcKjDr-c.js

@@ -1 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,r as a,s as o,st as s,u as c,w as l}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as u}from"./i18n-BxXwPz8H.js";import{t as d}from"./SectionShell-CHsfR9Y3.js";var f={class:`grid grid-cols-2 sm:grid-cols-3 gap-6`},p={class:`font-mono text-[12px] text-ink block`},m={class:`text-[12px] text-muted mt-1`},h={__name:`RadiiSection`,setup(h){let{t:g}=u(),_=[{name:`xs`,value:`6px`},{name:`sm`,value:`10px`},{name:`md`,value:`16px`},{name:`lg`,value:`20px`},{name:`xl`,value:`28px`},{name:`pill`,value:`100px`}];return(u,h)=>(t(),r(d,{eyebrow:n(g)(`ds.eyebrow.tokens`),title:n(g)(`ds.radii.title`),description:n(g)(`ds.radii.description`)},{default:e(()=>[o(`div`,f,[(t(),c(a,null,l(_,e=>o(`div`,{key:e.name,class:`flex flex-col items-center`},[o(`div`,{class:`h-32 w-full bg-paper border border-line mb-4 shadow-sm`,style:s({borderRadius:`var(--radius-${e.name})`})},null,4),o(`code`,p,`--radius-`+i(e.name),1),o(`span`,m,i(e.value),1)])),64))])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{h as default};

dist/assets/RadiiSection-CDVxX_nF.js

@@ -0,0 +1 @@
+import{C as e,G as t,T as n,c as r,ct as i,j as a,lt as o,r as s,s as c,u as l}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as u}from"./i18n-C5xQ6LQM.js";import{t as d}from"./SectionShell-BEISUYi8.js";var f={class:`grid grid-cols-2 sm:grid-cols-3 gap-6`},p={class:`font-mono text-[12px] text-ink block`},m={class:`text-[12px] text-muted mt-1`},h={__name:`RadiiSection`,setup(h){let{t:g}=u(),_=[{name:`xs`,value:`6px`},{name:`sm`,value:`10px`},{name:`md`,value:`16px`},{name:`lg`,value:`20px`},{name:`xl`,value:`28px`},{name:`pill`,value:`100px`}];return(u,h)=>(e(),r(d,{eyebrow:t(g)(`ds.eyebrow.tokens`),title:t(g)(`ds.radii.title`),description:t(g)(`ds.radii.description`)},{default:a(()=>[c(`div`,f,[(e(),l(s,null,n(_,e=>c(`div`,{key:e.name,class:`flex flex-col items-center`},[c(`div`,{class:`h-32 w-full bg-paper border border-line mb-4 shadow-sm`,style:i({borderRadius:`var(--radius-${e.name})`})},null,4),c(`code`,p,`--radius-`+o(e.name),1),c(`span`,m,o(e.value),1)])),64))])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{h as default};

dist/assets/Revitalization-BZF_I3rE.js

@@ -0,0 +1 @@
+import{C as e,T as t,c as n,j as r,l as i,lt as a,m as o,p as s,r as c,s as l,u}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as d}from"./Badge-DcvgVKep.js";import{t as f}from"./Button-DkdaDkuf.js";var p={id:`revitalize`,class:`bg-brand text-cream`},m={class:`mx-auto w-full max-w-6xl px-6 py-16 sm:px-8 sm:py-20 md:px-12 md:py-24 lg:px-16 lg:py-28`},h={class:`flex flex-col items-center text-center gap-6 max-w-3xl mx-auto`},g={key:1,class:`font-display font-normal leading-[1.04] tracking-tight`,style:{"font-size":`clamp(2.25rem, 5vw, 3.75rem)`}},_={key:0,class:`italic font-light text-accent-soft`},v={key:2,class:`text-lg leading-relaxed text-cream/80 max-w-2xl`},y={key:0,class:`mt-10 md:mt-14 grid gap-6 sm:grid-cols-3 sm:gap-8 max-w-4xl mx-auto`},b={class:`font-sans text-base font-semibold text-cream leading-snug`},x={key:1,class:`mt-10 md:mt-14 flex justify-center`},S={__name:`Revitalization`,props:{eyebrow:{type:String,default:``},headline:{type:String,default:``},headlineEm:{type:String,default:``},sub:{type:String,default:``},features:{type:Array,default:()=>[],validator:e=>e.every(e=>typeof e==`string`)},notifyCta:{type:String,default:``}},emits:[`notify`],setup(S){return(C,w)=>(e(),u(`section`,p,[l(`div`,m,[l(`div`,h,[S.eyebrow?(e(),n(d,{key:0,variant:`accent`},{default:r(()=>[s(a(S.eyebrow),1)]),_:1})):i(``,!0),S.headline||S.headlineEm?(e(),u(`h2`,g,[s(a(S.headline)+` `,1),S.headlineEm?(e(),u(`em`,_,a(S.headlineEm),1)):i(``,!0)])):i(``,!0),S.sub?(e(),u(`p`,v,a(S.sub),1)):i(``,!0)]),S.features.length?(e(),u(`ul`,y,[(e(!0),u(c,null,t(S.features.slice(0,3),t=>(e(),u(`li`,{key:t,class:`flex flex-col items-center gap-3 text-center`},[w[1]||=l(`span`,{"aria-hidden":`true`,class:`inline-block h-2 w-2 rounded-full bg-accent`},null,-1),l(`span`,b,a(t),1)]))),128))])):i(``,!0),S.notifyCta?(e(),u(`div`,x,[o(f,{variant:`accent`,size:`lg`,onClick:w[0]||=e=>C.$emit(`notify`)},{default:r(()=>[s(a(S.notifyCta),1)]),_:1})])):i(``,!0)])]))}};export{S as t};

dist/assets/RevitalizationPreview-D1Px3-RH.js

@@ -0,0 +1 @@
+import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as a}from"./i18n-C5xQ6LQM.js";import{t as o}from"./Revitalization-BZF_I3rE.js";var s={class:`min-h-screen bg-brand`},c={__name:`RevitalizationPreview`,setup(c){let{t:l}=a(),u=r(()=>[l(`revit.feature.1.title`),l(`revit.feature.2.title`),l(`revit.feature.3.title`)]);return(r,a)=>(e(),i(`div`,s,[n(o,{eyebrow:t(l)(`revit.eyebrow`),headline:t(l)(`revit.headline.a`),"headline-em":t(l)(`revit.headline.em`),sub:t(l)(`revit.sub`),features:u.value,"notify-cta":t(l)(`revit.notifyCta`)},null,8,[`eyebrow`,`headline`,`headline-em`,`sub`,`features`,`notify-cta`])]))}};export{c as default};

dist/assets/RevitalizationSection-nci7nuoK.js

@@ -0,0 +1,13 @@
+import{C as e,G as t,c as n,j as r,lt as i,m as a,s as o}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as s}from"./i18n-C5xQ6LQM.js";import{t as c}from"./SectionShell-BEISUYi8.js";import{t as l}from"./DevicePreview-DvIWByfU.js";var u={class:`eyebrow mb-5`},d=`/design/preview/revitalization`,f={__name:`RevitalizationSection`,setup(f){let{t:p}=s();return(s,f)=>(e(),n(c,{eyebrow:t(p)(`ds.eyebrow.components`),title:t(p)(`ds.revitalization.title`),description:t(p)(`ds.revitalization.description`),wide:``},{default:r(()=>[o(`section`,null,[a(l,{src:d,initial:`desktop`,height:720})]),o(`section`,null,[o(`h2`,u,i(t(p)(`ds.heading.usage`)),1),f[0]||=o(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[o(`pre`,{class:`whitespace-pre-wrap`},`<Revitalization
+  :eyebrow="t('revit.eyebrow')"
+  :headline="t('revit.headline.a')"
+  :headline-em="t('revit.headline.em')"
+  :sub="t('revit.sub')"
+  :features="[
+    t('revit.feature.1.title'),
+    t('revit.feature.2.title'),
+    t('revit.feature.3.title'),
+  ]"
+  :notify-cta="t('revit.notifyCta')"
+  @notify="captureEmail()"
+/>`)],-1)])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{f as default};

dist/assets/SearchSection-C1XxujmP.js

@@ -0,0 +1,11 @@
+import{B as e,C as t,G as n,T as r,c as i,j as a,lt as o,m as s,p as c,r as l,s as u,u as d}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as f}from"./Icon-BCRRMV3J.js";import{t as p}from"./i18n-C5xQ6LQM.js";import{t as m}from"./Search-CDT4B7PX.js";import{n as h,r as g}from"./products-EYsKyD6O.js";import{t as _}from"./Button-DkdaDkuf.js";import{t as v}from"./SectionShell-BEISUYi8.js";var y={class:`eyebrow mb-5`},b={class:`rounded-md border border-line bg-paper p-6 flex flex-col sm:flex-row sm:items-center gap-4`},x={class:`text-[13px] text-muted`},S={class:`eyebrow mb-5`},C={class:`rounded-md border border-line bg-paper divide-y divide-line overflow-hidden`},w=[`src`,`alt`],T={class:`min-w-0 flex-1`},E={class:`text-[14px] font-semibold text-ink truncate`},D={class:`text-[12px] text-muted truncate`},O={class:`shrink-0 text-[13px] font-semibold text-brand`},k={class:`eyebrow mb-5`},A=`natron pulver`,j={__name:`SearchSection`,setup(j){let{t:M}=p(),N=e(!1),P=g(A,h,4);return(e,p)=>(t(),i(v,{eyebrow:n(M)(`ds.eyebrow.components`),title:n(M)(`ds.search.title`),description:n(M)(`ds.search.description`)},{default:a(()=>[u(`section`,null,[u(`h2`,y,o(n(M)(`ds.heading.default`)),1),u(`div`,b,[s(_,{variant:`primary`,onClick:p[0]||=e=>N.value=!0},{before:a(()=>[s(f,{name:`search`,size:18})]),default:a(()=>[c(` `+o(n(M)(`ds.search.demo.label`)),1)]),_:1}),u(`p`,x,o(n(M)(`ds.search.demo.hint`)),1)])]),u(`section`,null,[u(`h2`,S,o(n(M)(`ds.heading.variants`))+` — "`+o(A)+`"`,1),u(`ul`,C,[(t(!0),d(l,null,r(n(P),e=>(t(),d(`li`,{key:e.id,class:`flex items-center gap-4 px-4 py-3`},[u(`img`,{src:e.image,alt:e.title,loading:`lazy`,decoding:`async`,class:`shrink-0 w-12 h-12 rounded-sm object-cover bg-cream`},null,8,w),u(`div`,T,[u(`p`,E,o(e.title),1),u(`p`,D,o(e.size)+` · `+o(e.category),1)]),u(`span`,O,`€ `+o(e.price.toFixed(2).replace(`.`,`,`)),1)]))),128))])]),u(`section`,null,[u(`h2`,k,o(n(M)(`ds.heading.usage`)),1),p[2]||=u(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[u(`pre`,{class:`whitespace-pre-wrap`},`import { products } from '@/api/products.js'
+import Search from '@/design-system/components/Search.vue'
+
+const open = ref(false)
+
+<Search v-model:open="open" :products="products" />
+
+// Navbar already renders its own Search overlay, so most callers
+// just pass the catalogue in:
+
+<Navbar :products="products" />`)],-1)]),s(m,{open:N.value,"onUpdate:open":p[1]||=e=>N.value=e,products:n(h)},null,8,[`open`,`products`])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{j as default};

dist/assets/SearchSection-NE4bUt_8.js

@@ -1,11 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,m as a,p as o,r as s,s as c,u as l,w as u,z as d}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as f}from"./Icon-D1Ud4H_f.js";import{t as p}from"./i18n-BxXwPz8H.js";import{t as m}from"./Search-DA7amK-p.js";import{n as h,r as g}from"./products-EYsKyD6O.js";import{t as _}from"./Button-CajVMpo0.js";import{t as v}from"./SectionShell-CHsfR9Y3.js";var y={class:`eyebrow mb-5`},b={class:`rounded-md border border-line bg-paper p-6 flex flex-col sm:flex-row sm:items-center gap-4`},x={class:`text-[13px] text-muted`},S={class:`eyebrow mb-5`},C={class:`rounded-md border border-line bg-paper divide-y divide-line overflow-hidden`},w=[`src`,`alt`],T={class:`min-w-0 flex-1`},E={class:`text-[14px] font-semibold text-ink truncate`},D={class:`text-[12px] text-muted truncate`},O={class:`shrink-0 text-[13px] font-semibold text-brand`},k={class:`eyebrow mb-5`},A=`natron pulver`,j={__name:`SearchSection`,setup(j){let{t:M}=p(),N=d(!1),P=g(A,h,4);return(d,p)=>(t(),r(v,{eyebrow:n(M)(`ds.eyebrow.components`),title:n(M)(`ds.search.title`),description:n(M)(`ds.search.description`)},{default:e(()=>[c(`section`,null,[c(`h2`,y,i(n(M)(`ds.heading.default`)),1),c(`div`,b,[a(_,{variant:`primary`,onClick:p[0]||=e=>N.value=!0},{before:e(()=>[a(f,{name:`search`,size:18})]),default:e(()=>[o(` `+i(n(M)(`ds.search.demo.label`)),1)]),_:1}),c(`p`,x,i(n(M)(`ds.search.demo.hint`)),1)])]),c(`section`,null,[c(`h2`,S,i(n(M)(`ds.heading.variants`))+` — "`+i(A)+`"`,1),c(`ul`,C,[(t(!0),l(s,null,u(n(P),e=>(t(),l(`li`,{key:e.id,class:`flex items-center gap-4 px-4 py-3`},[c(`img`,{src:e.image,alt:e.title,loading:`lazy`,decoding:`async`,class:`shrink-0 w-12 h-12 rounded-sm object-cover bg-cream`},null,8,w),c(`div`,T,[c(`p`,E,i(e.title),1),c(`p`,D,i(e.size)+` · `+i(e.category),1)]),c(`span`,O,`€ `+i(e.price.toFixed(2).replace(`.`,`,`)),1)]))),128))])]),c(`section`,null,[c(`h2`,k,i(n(M)(`ds.heading.usage`)),1),p[2]||=c(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[c(`pre`,{class:`whitespace-pre-wrap`},`import { products } from '@/api/products.js'
-import Search from '@/design-system/components/Search.vue'
-
-const open = ref(false)
-
-<Search v-model:open="open" :products="products" />
-
-// Navbar already renders its own Search overlay, so most callers
-// just pass the catalogue in:
-
-<Navbar :products="products" />`)],-1)]),a(m,{open:N.value,"onUpdate:open":p[1]||=e=>N.value=e,products:n(h)},null,8,[`open`,`products`])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{j as default};

dist/assets/SectionShell-BEISUYi8.js

@@ -1 +1 @@
-import{S as e,T as t,ct as n,l as r,ot as i,s as a,u as o}from"./runtime-core.esm-bundler-DgkFZzbt.js";var s={class:`mb-14 max-w-2xl`},c={class:`eyebrow mb-3`},l={class:`font-display text-5xl font-normal tracking-tight leading-[1.05] text-ink`},u={key:0,class:`mt-5 text-[17px] text-muted leading-relaxed`},d={class:`space-y-16`},f={__name:`SectionShell`,props:{eyebrow:{type:String,default:`Design system`},title:{type:String,required:!0},description:{type:String,default:``},wide:{type:Boolean,default:!1}},setup(f){return(p,m)=>(e(),o(`div`,{class:i([`mx-auto py-16`,f.wide?`max-w-none px-6 lg:px-8`:`max-w-5xl px-10 lg:px-16`])},[a(`header`,s,[a(`p`,c,n(f.eyebrow),1),a(`h1`,l,n(f.title),1),f.description?(e(),o(`p`,u,n(f.description),1)):r(``,!0)]),a(`div`,d,[t(p.$slots,`default`)])],2))}};export{f as t};
+import{C as e,E as t,l as n,lt as r,s as i,st as a,u as o}from"./runtime-core.esm-bundler-BD0e4RlP.js";var s={class:`mb-14 max-w-2xl`},c={class:`eyebrow mb-3`},l={class:`font-display text-5xl font-normal tracking-tight leading-[1.05] text-ink`},u={key:0,class:`mt-5 text-[17px] text-muted leading-relaxed`},d={class:`space-y-16`},f={__name:`SectionShell`,props:{eyebrow:{type:String,default:`Design system`},title:{type:String,required:!0},description:{type:String,default:``},wide:{type:Boolean,default:!1}},setup(f){return(p,m)=>(e(),o(`div`,{class:a([`mx-auto py-16`,f.wide?`max-w-none px-6 lg:px-8`:`max-w-5xl px-10 lg:px-16`])},[i(`header`,s,[i(`p`,c,r(f.eyebrow),1),i(`h1`,l,r(f.title),1),f.description?(e(),o(`p`,u,r(f.description),1)):n(``,!0)]),i(`div`,d,[t(p.$slots,`default`)])],2))}};export{f as t};

dist/assets/ShadowsSection-D7fyNVcf.js

@@ -1 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,o as a,r as o,s,st as c,u as l,w as u}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as d}from"./i18n-BxXwPz8H.js";import{t as f}from"./SectionShell-CHsfR9Y3.js";var p={class:`grid sm:grid-cols-3 gap-8`},m={class:`font-mono text-[12px] text-ink block`},h={class:`text-[13px] text-muted mt-1`},g={__name:`ShadowsSection`,setup(g){let{t:_}=d(),v=a(()=>[{name:`sm`,css:`var(--shadow-sm)`,note:_(`ds.shadows.sm.note`)},{name:`md`,css:`var(--shadow-md)`,note:_(`ds.shadows.md.note`)},{name:`lg`,css:`var(--shadow-lg)`,note:_(`ds.shadows.lg.note`)}]);return(a,d)=>(t(),r(f,{eyebrow:n(_)(`ds.eyebrow.tokens`),title:n(_)(`ds.shadows.title`),description:n(_)(`ds.shadows.description`)},{default:e(()=>[s(`div`,p,[(t(!0),l(o,null,u(v.value,e=>(t(),l(`div`,{key:e.name,class:`space-y-4`},[s(`div`,{class:`h-36 rounded-md bg-paper`,style:c({boxShadow:e.css})},null,4),s(`div`,null,[s(`code`,m,`--shadow-`+i(e.name),1),s(`p`,h,i(e.note),1)])]))),128))])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{g as default};

dist/assets/ShadowsSection-DNiuNlpr.js

@@ -0,0 +1 @@
+import{C as e,G as t,T as n,c as r,ct as i,j as a,lt as o,o as s,r as c,s as l,u}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as d}from"./i18n-C5xQ6LQM.js";import{t as f}from"./SectionShell-BEISUYi8.js";var p={class:`grid sm:grid-cols-3 gap-8`},m={class:`font-mono text-[12px] text-ink block`},h={class:`text-[13px] text-muted mt-1`},g={__name:`ShadowsSection`,setup(g){let{t:_}=d(),v=s(()=>[{name:`sm`,css:`var(--shadow-sm)`,note:_(`ds.shadows.sm.note`)},{name:`md`,css:`var(--shadow-md)`,note:_(`ds.shadows.md.note`)},{name:`lg`,css:`var(--shadow-lg)`,note:_(`ds.shadows.lg.note`)}]);return(s,d)=>(e(),r(f,{eyebrow:t(_)(`ds.eyebrow.tokens`),title:t(_)(`ds.shadows.title`),description:t(_)(`ds.shadows.description`)},{default:a(()=>[l(`div`,p,[(e(!0),u(c,null,n(v.value,t=>(e(),u(`div`,{key:t.name,class:`space-y-4`},[l(`div`,{class:`h-36 rounded-md bg-paper`,style:i({boxShadow:t.css})},null,4),l(`div`,null,[l(`code`,m,`--shadow-`+o(t.name),1),l(`p`,h,o(t.note),1)])]))),128))])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{g as default};

dist/assets/TypographySection-DefQ8ipJ.js

@@ -0,0 +1 @@
+import{C as e,G as t,T as n,c as r,j as i,lt as a,m as o,r as s,s as c,st as l,u}from"./runtime-core.esm-bundler-BD0e4RlP.js";import{t as d}from"./i18n-C5xQ6LQM.js";import{t as f}from"./SectionShell-BEISUYi8.js";import{t as p}from"./Card-DM27vc3f.js";var m={class:`grid md:grid-cols-2 gap-6`},h={class:`eyebrow mb-3`},g={class:`text-[14px] text-muted leading-relaxed`},_={class:`eyebrow mb-3`},v={class:`text-[14px] text-muted leading-relaxed`},y={class:`eyebrow mb-6`},b={class:`divide-y divide-line rounded-md border border-line bg-paper px-6`},x={class:`font-mono text-[11px] text-muted w-24 shrink-0`},S={__name:`TypographySection`,setup(S){let{t:C}=d(),w=[`xs`,`sm`,`base`,`lg`,`xl`,`2xl`,`3xl`,`4xl`,`5xl`];return(d,S)=>(e(),r(f,{eyebrow:t(C)(`ds.eyebrow.tokens`),title:t(C)(`ds.typography.title`),description:t(C)(`ds.typography.description`)},{default:i(()=>[c(`section`,m,[o(p,{tone:`paper`},{default:i(()=>[c(`p`,h,a(t(C)(`ds.heading.display`)),1),S[0]||=c(`p`,{class:`font-display text-5xl font-normal leading-[1.05] mb-3`},`Fraunces`,-1),c(`p`,g,a(t(C)(`ds.typography.serifDesc`)),1),S[1]||=c(`code`,{class:`font-mono text-[11px] text-muted block mt-5`},`var(--font-serif)`,-1)]),_:1}),o(p,{tone:`paper`},{default:i(()=>[c(`p`,_,a(t(C)(`ds.heading.body`)),1),S[2]||=c(`p`,{class:`font-sans text-5xl font-medium leading-[1.05] mb-3`},`DM Sans`,-1),c(`p`,v,a(t(C)(`ds.typography.sansDesc`)),1),S[3]||=c(`code`,{class:`font-mono text-[11px] text-muted block mt-5`},`var(--font-sans)`,-1)]),_:1})]),c(`section`,null,[c(`h2`,y,a(t(C)(`ds.heading.scale`)),1),c(`div`,b,[(e(),u(s,null,n(w,e=>c(`div`,{key:e,class:`flex items-baseline gap-8 py-4`},[c(`code`,x,`text-`+a(e),1),c(`span`,{class:l(`text-${e}`)},a(t(C)(`ds.typography.sample`)),3)])),64))])])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{S as default};

dist/assets/TypographySection-DjsFMcb-.js

@@ -1 +0,0 @@
-import{A as e,S as t,W as n,c as r,ct as i,m as a,ot as o,r as s,s as c,u as l,w as u}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as d}from"./i18n-BxXwPz8H.js";import{t as f}from"./SectionShell-CHsfR9Y3.js";import{t as p}from"./Card-BhcSEJNV.js";var m={class:`grid md:grid-cols-2 gap-6`},h={class:`eyebrow mb-3`},g={class:`text-[14px] text-muted leading-relaxed`},_={class:`eyebrow mb-3`},v={class:`text-[14px] text-muted leading-relaxed`},y={class:`eyebrow mb-6`},b={class:`divide-y divide-line rounded-md border border-line bg-paper px-6`},x={class:`font-mono text-[11px] text-muted w-24 shrink-0`},S={__name:`TypographySection`,setup(S){let{t:C}=d(),w=[`xs`,`sm`,`base`,`lg`,`xl`,`2xl`,`3xl`,`4xl`,`5xl`];return(d,S)=>(t(),r(f,{eyebrow:n(C)(`ds.eyebrow.tokens`),title:n(C)(`ds.typography.title`),description:n(C)(`ds.typography.description`)},{default:e(()=>[c(`section`,m,[a(p,{tone:`paper`},{default:e(()=>[c(`p`,h,i(n(C)(`ds.heading.display`)),1),S[0]||=c(`p`,{class:`font-display text-5xl font-normal leading-[1.05] mb-3`},`Fraunces`,-1),c(`p`,g,i(n(C)(`ds.typography.serifDesc`)),1),S[1]||=c(`code`,{class:`font-mono text-[11px] text-muted block mt-5`},`var(--font-serif)`,-1)]),_:1}),a(p,{tone:`paper`},{default:e(()=>[c(`p`,_,i(n(C)(`ds.heading.body`)),1),S[2]||=c(`p`,{class:`font-sans text-5xl font-medium leading-[1.05] mb-3`},`DM Sans`,-1),c(`p`,v,i(n(C)(`ds.typography.sansDesc`)),1),S[3]||=c(`code`,{class:`font-mono text-[11px] text-muted block mt-5`},`var(--font-sans)`,-1)]),_:1})]),c(`section`,null,[c(`h2`,y,i(n(C)(`ds.heading.scale`)),1),c(`div`,b,[(t(),l(s,null,u(w,e=>c(`div`,{key:e,class:`flex items-baseline gap-8 py-4`},[c(`code`,x,`text-`+i(e),1),c(`span`,{class:o(`text-${e}`)},i(n(C)(`ds.typography.sample`)),3)])),64))])])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{S as default};

dist/assets/api-USrZCulT.js

@@ -1 +1 @@
-import{n as e}from"./pinia-BLnSyg0Y.js";import{n as t}from"./products-EYsKyD6O.js";var n=`kn-cart-v1`;function r(){if(typeof localStorage>`u`)return[];try{let e=localStorage.getItem(n);if(!e)return[];let t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>e&&typeof e.productId==`string`&&Number.isInteger(e.quantity)&&e.quantity>0):[]}catch{return[]}}function i(e){if(!(typeof localStorage>`u`))try{localStorage.setItem(n,JSON.stringify(e))}catch{}}function a(e){let n=t.find(t=>t.id===e.productId);return n?{productId:e.productId,quantity:e.quantity,unitPrice:n.price,lineTotal:+(n.price*e.quantity).toFixed(2),product:{id:n.id,title:n.title,brand:n.brand,size:n.size,image:n.image,href:n.href}}:null}var o=e(`cart`,{state:()=>({lines:r()}),getters:{items:e=>e.lines.map(a).filter(Boolean),count:e=>e.lines.reduce((e,t)=>e+t.quantity,0),subtotal(){return+this.items.reduce((e,t)=>e+t.lineTotal,0).toFixed(2)},isEmpty:e=>e.lines.length===0},actions:{add(e,t=1){let n=this.lines.find(t=>t.productId===e);n?n.quantity+=t:this.lines.push({productId:e,quantity:t}),i(this.lines)},update(e,t){if(Number.isInteger(t)){if(t<=0)this.lines=this.lines.filter(t=>t.productId!==e);else{let n=this.lines.find(t=>t.productId===e);n&&(n.quantity=t)}i(this.lines)}},remove(e){this.lines=this.lines.filter(t=>t.productId!==e),i(this.lines)},clear(){this.lines=[],i(this.lines)}}});function s(e){return{items:e.items,count:e.count,subtotal:e.subtotal,updatedAt:new Date().toISOString()}}async function c(){return s(o())}async function l(e,t=1){if(typeof e!=`string`||!e)throw Error(`cart.productIdRequired`);let n=Number.isInteger(t)?t:1;if(n<1)throw Error(`cart.quantityInvalid`);let r=o();return r.add(e,n),s(r)}async function u(e,t){let n=o();return n.update(e,Number.isInteger(t)?t:0),s(n)}async function d(e){let t=o();return t.remove(e),s(t)}async function f(){let e=o();return e.clear(),s(e)}export{u as a,d as i,f as n,o,c as r,l as t};
+import{n as e}from"./pinia-DQoUg3qR.js";import{n as t}from"./products-EYsKyD6O.js";var n=`kn-cart-v1`;function r(){if(typeof localStorage>`u`)return[];try{let e=localStorage.getItem(n);if(!e)return[];let t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>e&&typeof e.productId==`string`&&Number.isInteger(e.quantity)&&e.quantity>0):[]}catch{return[]}}function i(e){if(!(typeof localStorage>`u`))try{localStorage.setItem(n,JSON.stringify(e))}catch{}}function a(e){let n=t.find(t=>t.id===e.productId);return n?{productId:e.productId,quantity:e.quantity,unitPrice:n.price,lineTotal:+(n.price*e.quantity).toFixed(2),product:{id:n.id,title:n.title,brand:n.brand,size:n.size,image:n.image,href:n.href}}:null}var o=e(`cart`,{state:()=>({lines:r()}),getters:{items:e=>e.lines.map(a).filter(Boolean),count:e=>e.lines.reduce((e,t)=>e+t.quantity,0),subtotal(){return+this.items.reduce((e,t)=>e+t.lineTotal,0).toFixed(2)},isEmpty:e=>e.lines.length===0},actions:{add(e,t=1){let n=this.lines.find(t=>t.productId===e);n?n.quantity+=t:this.lines.push({productId:e,quantity:t}),i(this.lines)},update(e,t){if(Number.isInteger(t)){if(t<=0)this.lines=this.lines.filter(t=>t.productId!==e);else{let n=this.lines.find(t=>t.productId===e);n&&(n.quantity=t)}i(this.lines)}},remove(e){this.lines=this.lines.filter(t=>t.productId!==e),i(this.lines)},clear(){this.lines=[],i(this.lines)}}});function s(e){return{items:e.items,count:e.count,subtotal:e.subtotal,updatedAt:new Date().toISOString()}}async function c(){return s(o())}async function l(e,t=1){if(typeof e!=`string`||!e)throw Error(`cart.productIdRequired`);let n=Number.isInteger(t)?t:1;if(n<1)throw Error(`cart.quantityInvalid`);let r=o();return r.add(e,n),s(r)}async function u(e,t){let n=o();return n.update(e,Number.isInteger(t)?t:0),s(n)}async function d(e){let t=o();return t.remove(e),s(t)}async function f(){let e=o();return e.clear(),s(e)}export{u as a,d as i,f as n,o,c as r,l as t};

dist/index.html

@@ -12,13 +12,13 @@
       href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,400;1,9..144,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-ftsiBOTx.js"></script>
+    <script type="module" crossorigin src="/assets/index-BDWXhtND.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/_plugin-vue_export-helper-BOai-rQB.js">
-    <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-DgkFZzbt.js">
-    <link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-ouKdkQwB.js">
-    <link rel="modulepreload" crossorigin href="/assets/pinia-BLnSyg0Y.js">
-    <link rel="modulepreload" crossorigin href="/assets/vue-router-BUTR8NmK.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-vGoszaZF.css">
+    <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-BD0e4RlP.js">
+    <link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-CcSFQHoC.js">
+    <link rel="modulepreload" crossorigin href="/assets/pinia-DQoUg3qR.js">
+    <link rel="modulepreload" crossorigin href="/assets/vue-router-QRVDVSxc.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-CEyFtsXY.css">
   </head>
   <body>
     <div id="app"></div>

src/design-system/components/About.vue

@@ -0,0 +1,108 @@
+<script setup>
+import Badge from './Badge.vue'
+
+/**
+ * About — a centered intro + three-up milestone gallery.
+ *
+ * Content is supplied entirely via props. Milestones are expected as an
+ * array of `{ year, title, text }` entries; extras past the third are
+ * ignored to keep the "max three things" rhythm.
+ *
+ * The three cards cycle the Card primitive's tones left-to-right —
+ * paper / cream / brand — so the row echoes the design system's three
+ * canonical surfaces rather than repeating a single tone.
+ */
+defineProps({
+  eyebrow: { type: String, default: '' },
+  headline: { type: String, default: '' },
+  sub: { type: String, default: '' },
+  milestones: {
+    type: Array,
+    default: () => [],
+    validator: (arr) =>
+      arr.every(
+        (m) =>
+          m &&
+          typeof m === 'object' &&
+          typeof m.year === 'string' &&
+          typeof m.title === 'string' &&
+          typeof m.text === 'string',
+      ),
+  },
+})
+
+// Per-index tone map mirrors the Card primitive's three tones so the
+// surface colors always match what `ds-cards` documents. Keeping it as
+// a const (not a prop) because the sequence is part of the section's
+// visual contract — a caller reordering it would break the intent.
+const CARD_TONES = [
+  {
+    card: 'bg-paper border-line',
+    year: 'text-muted',
+    title: 'text-ink',
+    body: 'text-muted',
+  },
+  {
+    card: 'bg-cream border-line',
+    year: 'text-muted',
+    title: 'text-ink',
+    body: 'text-muted',
+  },
+  {
+    card: 'bg-brand border-transparent',
+    year: 'text-accent',
+    title: 'text-cream',
+    body: 'text-cream/80',
+  },
+]
+</script>
+
+<template>
+  <section id="about" class="bg-cream text-ink">
+    <div class="mx-auto w-full max-w-6xl px-6 py-16 sm:px-8 sm:py-20 md:px-12 md:py-24 lg:px-16 lg:py-28">
+      <div class="flex flex-col items-center text-center gap-4 max-w-3xl mx-auto">
+        <Badge v-if="eyebrow" variant="brand">{{ eyebrow }}</Badge>
+
+        <h2
+          v-if="headline"
+          class="font-display font-normal leading-[1.05] tracking-tight text-ink"
+          style="font-size: clamp(2.25rem, 5vw, 3.75rem);"
+        >{{ headline }}</h2>
+
+        <p v-if="sub" class="text-lg leading-relaxed text-muted max-w-2xl">
+          {{ sub }}
+        </p>
+      </div>
+
+      <!-- Three timeline milestones. Stacks on mobile; three columns from
+           md up, each rendered as a paper card so the cream section reads
+           as a gallery rather than a flat list. -->
+      <ol
+        v-if="milestones.length"
+        class="mt-10 md:mt-16 grid gap-5 md:grid-cols-3 md:gap-6"
+      >
+        <li
+          v-for="(milestone, i) in milestones.slice(0, 3)"
+          :key="milestone.year + milestone.title"
+          :class="[
+            'flex flex-col gap-3 rounded-md border p-6 md:p-7',
+            CARD_TONES[i].card,
+          ]"
+        >
+          <span :class="['text-xs tracking-label uppercase', CARD_TONES[i].year]">
+            {{ milestone.year }}
+          </span>
+          <h3
+            :class="[
+              'font-display text-2xl font-normal leading-tight',
+              CARD_TONES[i].title,
+            ]"
+          >{{ milestone.title }}</h3>
+          <p :class="['text-sm leading-relaxed', CARD_TONES[i].body]">
+            {{ milestone.text }}
+          </p>
+        </li>
+      </ol>
+    </div>
+  </section>
+</template>

src/design-system/components/BundleCard.vue

@@ -0,0 +1,183 @@
+<script setup>
+import { computed } from 'vue'
+import Button from './Button.vue'
+import Badge from './Badge.vue'
+import Icon from './Icon.vue'
+import { useI18n } from '@/i18n/index.js'
+
+const props = defineProps({
+  name: { type: String, required: true },
+  // Each item is a short label like "1× Kaiser-Natron Pulver 250g".
+  // Capped visually at 3 to honour the "max 3 things" rule; any extras
+  // collapse into a "+ N weitere" line so the card stays scannable.
+  items: { type: Array, required: true },
+  price: { type: Number, required: true },
+  memberPrice: { type: Number, default: null },
+  usage: { type: String, default: '' },
+  image: { type: String, required: true },
+  imageAlt: { type: String, default: '' },
+  badge: { type: String, default: '' },
+  badgeVariant: {
+    type: String,
+    default: 'accent',
+    validator: (v) =>
+      ['neutral', 'brand', 'accent', 'subtle', 'success', 'warning', 'danger'].includes(v),
+  },
+  tone: {
+    type: String,
+    default: 'paper',
+    validator: (t) => ['paper', 'cream'].includes(t),
+  },
+  // Vertical = image on top, body below (grid use).
+  // Horizontal = image on the left and body on the right from md up
+  // (featured / carousel use, where the card owns the full row width).
+  layout: {
+    type: String,
+    default: 'vertical',
+    validator: (l) => ['vertical', 'horizontal'].includes(l),
+  },
+  inStock: { type: Boolean, default: true },
+  currency: { type: String, default: '€' },
+  href: { type: String, default: '' },
+})
+
+defineEmits(['add'])
+
+const { t } = useI18n()
+
+const tones = {
+  paper: { surface: 'bg-paper', media: 'bg-cream', border: 'border-line' },
+  cream: { surface: 'bg-cream', media: 'bg-paper', border: 'border-line' },
+}
+const tone = computed(() => tones[props.tone])
+
+function formatMoney(amount) {
+  return `${props.currency} ${amount.toFixed(2).replace('.', ',')}`
+}
+
+const priceLabel = computed(() => formatMoney(props.price))
+const memberLabel = computed(() =>
+  props.memberPrice != null ? formatMoney(props.memberPrice) : '',
+)
+
+const MAX_ITEMS = 3
+const visibleItems = computed(() => props.items.slice(0, MAX_ITEMS))
+const extraCount = computed(() => Math.max(0, props.items.length - MAX_ITEMS))
+</script>
+
+<template>
+  <article
+    :class="[
+      'group flex overflow-hidden rounded-md border transition-all duration-base ease-out',
+      layout === 'horizontal' ? 'flex-col md:flex-row' : 'flex-col',
+      tone.surface,
+      tone.border,
+      'hover:-translate-y-1 hover:shadow-md hover:border-brand-soft',
+    ]"
+  >
+    <!-- Media. In horizontal mode the media column is a tighter ~38% of the
+         row from md up and drops its mobile aspect ratio so flex-stretch
+         can match the body height. -->
+    <component
+      :is="href ? 'a' : 'div'"
+      :href="href || null"
+      :class="[
+        'relative block overflow-hidden',
+        layout === 'horizontal'
+          ? 'aspect-[4/3] md:aspect-auto md:w-[38%] md:shrink-0 md:min-h-[300px]'
+          : 'aspect-[4/3]',
+        tone.media,
+      ]"
+    >
+      <Badge
+        v-if="badge"
+        :variant="badgeVariant"
+        class="absolute top-4 left-4 z-[1]"
+      >{{ badge }}</Badge>
+      <img
+        :src="image"
+        :alt="imageAlt || name"
+        loading="lazy"
+        decoding="async"
+        :class="[
+          'absolute inset-0 w-full h-full object-contain transition-transform duration-slow ease-out group-hover:scale-105',
+          layout === 'horizontal' ? 'p-6 md:p-5' : 'p-8',
+        ]"
+      />
+    </component>
+
+    <!-- Body -->
+    <div
+      :class="[
+        'flex flex-col gap-4 p-6',
+        layout === 'horizontal' ? 'md:p-6 md:flex-1' : '',
+      ]"
+    >
+      <div class="flex flex-col gap-1.5">
+        <span
+          v-if="usage"
+          class="text-xs font-semibold tracking-label text-muted uppercase"
+        >{{ usage }}</span>
+        <component
+          :is="href ? 'a' : 'h3'"
+          :href="href || null"
+          :class="[
+            'font-display text-xl font-normal leading-tight text-ink',
+            href ? 'hover:text-brand transition-colors duration-base' : '',
+          ]"
+        >{{ name }}</component>
+      </div>
+
+      <ul class="flex flex-col gap-1.5">
+        <li
+          v-for="label in visibleItems"
+          :key="label"
+          class="text-sm text-ink/80 leading-relaxed"
+        >{{ label }}</li>
+        <li
+          v-if="extraCount > 0"
+          class="text-sm text-muted tracking-label"
+        >+ {{ extraCount }} {{ t('bundles.card.moreItems') }}</li>
+      </ul>
+
+      <!-- Footer. Vertical cards stack price + block button; horizontal
+           cards put them side-by-side (price info left, compact CTA right)
+           to cut the empty white the block button left behind. -->
+      <div
+        :class="[
+          'mt-auto pt-4 border-t border-line flex gap-3',
+          layout === 'horizontal'
+            ? 'flex-col sm:flex-row sm:items-end sm:justify-between'
+            : 'flex-col',
+        ]"
+      >
+        <div class="flex flex-col gap-0.5">
+          <span class="text-xs tracking-label text-muted uppercase">
+            {{ t('bundles.card.priceLabel') }}
+          </span>
+          <span class="font-display text-2xl font-normal text-brand leading-none">
+            {{ priceLabel }}
+          </span>
+          <span v-if="memberLabel" class="text-xs text-muted mt-1">
+            {{ t('bundles.card.memberPrefix') }} {{ memberLabel }}
+          </span>
+          <span
+            v-if="!inStock"
+            class="text-xs font-semibold tracking-label uppercase text-danger mt-1"
+          >{{ t('ds.product.outOfStock') }}</span>
+        </div>
+
+        <Button
+          variant="primary"
+          size="md"
+          :block="layout === 'vertical'"
+          :disabled="!inStock"
+          @click="$emit('add')"
+        >
+          <template #before><Icon name="plus" :size="16" /></template>
+          {{ t('ds.buttons.addToCart') }}
+        </Button>
+      </div>
+    </div>
+  </article>
+</template>

src/design-system/components/Bundles.vue

@@ -0,0 +1,297 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import Button from './Button.vue'
+import Icon from './Icon.vue'
+import IconButton from './IconButton.vue'
+import BundleCard from './BundleCard.vue'
+import { useI18n } from '@/i18n/index.js'
+
+/**
+ * Bundles — a mixed sidebar + carousel compound section.
+ *
+ * Content is supplied entirely via props so the component is decoupled
+ * from any single i18n namespace. Carousel chrome (prev / next / dot
+ * labels) is resolved internally against `ds.bundles.carousel.*` and
+ * can be overridden per-instance via the *Label / *A11y props.
+ */
+const props = defineProps({
+  // Section headline. `headline` renders in the display serif; `headlineEm`
+  // is the italicised highlight, styled consistently with Hero.
+  headline: { type: String, default: '' },
+  headlineEm: { type: String, default: '' },
+  sub: { type: String, default: '' },
+
+  // Three benefit strings. Anything beyond the third index is ignored —
+  // the "max three things" rule is enforced structurally here because a
+  // longer list visibly undermines the sidebar's balance with the cards.
+  benefits: {
+    type: Array,
+    default: () => [],
+    validator: (arr) => arr.every((v) => typeof v === 'string'),
+  },
+
+  joinCta: { type: String, default: '' },
+
+  // { id, name, items[], price, memberPrice?, usage?, image, imageAlt?,
+  //   badge?, badgeVariant? } per bundle.
+  bundles: { type: Array, required: true },
+
+  // Optional ARIA / label overrides — default to DS chrome strings.
+  carouselLabel: { type: String, default: '' },
+  carouselPrevLabel: { type: String, default: '' },
+  carouselNextLabel: { type: String, default: '' },
+  carouselGoToPrefix: { type: String, default: '' },
+})
+
+defineEmits(['add', 'join'])
+
+const { t } = useI18n()
+
+const carouselLabel = () => props.carouselLabel || t('ds.bundles.carousel.label')
+const carouselPrev = () => props.carouselPrevLabel || t('ds.bundles.carousel.prev')
+const carouselNext = () => props.carouselNextLabel || t('ds.bundles.carousel.next')
+const goToPrefix = () => props.carouselGoToPrefix || t('ds.bundles.carousel.goToSlide')
+
+// Carousel — only active from md up. Mobile uses a plain stacked grid.
+const track = ref(null)
+const activeIndex = ref(0)
+
+function slideCount() {
+  return track.value ? track.value.children.length : 0
+}
+
+function goTo(i, behavior = 'smooth') {
+  const el = track.value
+  if (!el) return
+  const last = el.children.length - 1
+  const target = Math.max(0, Math.min(i, last))
+  el.scrollTo({ left: target * el.clientWidth, behavior })
+}
+
+// Looping navigation — next on the last slide wraps to the first, prev
+// on the first wraps to the last. It's a visible jump (not a seamless
+// infinite scroll), matching the "3 > 1 and 1 < 3" wrap the user asked
+// for without the complexity of duplicated slides.
+function prev() {
+  const last = slideCount() - 1
+  if (last < 0) return
+  goTo(activeIndex.value === 0 ? last : activeIndex.value - 1)
+}
+
+function next() {
+  const last = slideCount() - 1
+  if (last < 0) return
+  goTo(activeIndex.value === last ? 0 : activeIndex.value + 1)
+}
+
+// Math.round against scrollLeft / clientWidth resolves to the nearest
+// full slide — snap-mandatory keeps it honest but the handler is robust
+// to subpixel drift while a scroll animation is in flight.
+function onScroll() {
+  const el = track.value
+  if (!el) return
+  const i = Math.round(el.scrollLeft / el.clientWidth)
+  if (i !== activeIndex.value) activeIndex.value = i
+}
+
+// Viewport resize changes clientWidth, leaving a stale scrollLeft
+// stopped between two cards. Re-anchor on the next frame (after layout
+// has settled) using `auto` behavior — the slide stays visually put,
+// we're only re-aligning the offset.
+let resizeFrame = 0
+function onResize() {
+  if (resizeFrame) cancelAnimationFrame(resizeFrame)
+  resizeFrame = requestAnimationFrame(() => {
+    const el = track.value
+    if (!el) return
+    el.scrollLeft = activeIndex.value * el.clientWidth
+    resizeFrame = 0
+  })
+}
+
+onMounted(() => {
+  window.addEventListener('resize', onResize, { passive: true })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', onResize)
+  if (resizeFrame) cancelAnimationFrame(resizeFrame)
+})
+</script>
+
+<template>
+  <section id="bundles" class="bg-surface text-ink">
+    <!-- Matches the Hero banner container — same max-w-6xl so the section
+         aligns with the banner above rather than breaking full-bleed. -->
+    <div
+      class="mx-auto w-full max-w-6xl px-6 py-16 sm:px-8 sm:py-20 md:px-12 md:py-20 lg:px-16 lg:py-24"
+    >
+      <div class="grid gap-10 md:gap-12 lg:gap-16 lg:grid-cols-[340px_1fr] lg:items-center">
+        <!-- Sidebar: heading + sub + up-to-3 benefits + CTA. -->
+        <aside class="flex flex-col gap-8">
+          <div v-if="headline || sub" class="flex flex-col gap-4">
+            <h2
+              v-if="headline || headlineEm"
+              class="font-display font-normal leading-[1.05] tracking-tight text-ink"
+              style="font-size: clamp(2rem, 4vw, 3rem);"
+            >
+              {{ headline }}
+              <em
+                v-if="headlineEm"
+                class="italic font-light text-brand"
+              >{{ headlineEm }}</em>
+            </h2>
+            <p v-if="sub" class="text-base leading-relaxed text-muted max-w-md">
+              {{ sub }}
+            </p>
+          </div>
+
+          <ul v-if="benefits.length" class="flex flex-col gap-4">
+            <li
+              v-for="benefit in benefits.slice(0, 3)"
+              :key="benefit"
+              class="flex items-start gap-3"
+            >
+              <span
+                aria-hidden="true"
+                class="mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-brand-wash text-brand"
+              >
+                <Icon name="check" :size="14" :stroke-width="2.2" />
+              </span>
+              <span class="font-sans text-sm font-semibold text-ink leading-snug">
+                {{ benefit }}
+              </span>
+            </li>
+          </ul>
+
+          <Button
+            v-if="joinCta"
+            variant="primary"
+            size="md"
+            @click="$emit('join')"
+          >{{ joinCta }}</Button>
+        </aside>
+
+        <!-- Bundles. `min-w-0` is load-bearing: a grid `1fr` column
+             defaults to `min-width: auto`, letting its children's
+             intrinsic width push the column past its allocation.
+             Without this, the carousel's fixed-width slides drag the
+             right column past the section's max-width during resizes. -->
+        <div class="min-w-0">
+          <!-- Mobile: vertical stack. -->
+          <div class="md:hidden grid gap-5">
+            <BundleCard
+              v-for="bundle in bundles"
+              :key="bundle.id"
+              layout="vertical"
+              :name="bundle.name"
+              :items="bundle.items"
+              :price="bundle.price"
+              :member-price="bundle.memberPrice"
+              :usage="bundle.usage"
+              :image="bundle.image"
+              :image-alt="bundle.imageAlt"
+              :badge="bundle.badge"
+              :badge-variant="bundle.badgeVariant || 'accent'"
+              tone="paper"
+              @add="$emit('add', bundle.id)"
+            />
+          </div>
+
+          <!-- md+ : one-at-a-time scroll-snap carousel with horizontal cards.
+               Swipe, keyboard arrow keys, and the prev/next buttons all
+               drive the same scrollLeft — no animation state needed. -->
+          <div class="hidden md:flex md:flex-col md:gap-6 relative">
+            <!-- Padding + matching negative margins reserve room inside the
+                 scroll container for the hover lift and shadow-md without
+                 expanding the visible slot. overflow-x-auto forces
+                 overflow-y to behave in most engines, so any vertical
+                 overflow would otherwise clip. -->
+            <div
+              ref="track"
+              class="flex snap-x snap-mandatory overflow-x-auto scroll-smooth no-scrollbar pt-2 pb-16 -mt-2 -mb-16"
+              role="region"
+              aria-roledescription="carousel"
+              :aria-label="carouselLabel()"
+              @scroll="onScroll"
+            >
+              <div
+                v-for="(bundle, i) in bundles"
+                :key="bundle.id"
+                class="snap-start shrink-0 w-full"
+                role="group"
+                aria-roledescription="slide"
+                :aria-label="`${i + 1} / ${bundles.length}`"
+              >
+                <BundleCard
+                  layout="horizontal"
+                  :name="bundle.name"
+                  :items="bundle.items"
+                  :price="bundle.price"
+                  :member-price="bundle.memberPrice"
+                  :usage="bundle.usage"
+                  :image="bundle.image"
+                  :image-alt="bundle.imageAlt"
+                  :badge="bundle.badge"
+                  :badge-variant="bundle.badgeVariant || 'accent'"
+                  tone="paper"
+                  @add="$emit('add', bundle.id)"
+                />
+              </div>
+            </div>
+
+            <!-- Controls: dot indicators on the left, prev/next on the right. -->
+            <div class="flex items-center justify-between gap-4">
+              <div class="flex items-center gap-2">
+                <button
+                  v-for="(_, i) in bundles"
+                  :key="i"
+                  type="button"
+                  :class="[
+                    'h-2 rounded-full transition-all duration-base',
+                    activeIndex === i
+                      ? 'w-8 bg-brand'
+                      : 'w-2 bg-brand/30 hover:bg-brand/50',
+                  ]"
+                  :aria-label="`${goToPrefix()} ${i + 1}`"
+                  :aria-current="activeIndex === i ? 'true' : undefined"
+                  @click="goTo(i)"
+                />
+              </div>
+
+              <div class="flex items-center gap-2">
+                <IconButton
+                  icon="chevron-left"
+                  variant="brand-wash"
+                  size="md"
+                  :aria-label="carouselPrev()"
+                  @click="prev"
+                />
+                <IconButton
+                  icon="chevron-right"
+                  variant="brand-wash"
+                  size="md"
+                  :aria-label="carouselNext()"
+                  @click="next"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+/* Keep the native scrollbar out of the carousel chrome — the dots + arrows
+   already convey position and range, and a visible bar competes with the
+   pill indicators. */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+</style>

src/design-system/components/Revitalization.vue

@@ -0,0 +1,85 @@
+<script setup>
+import Badge from './Badge.vue'
+import Button from './Button.vue'
+
+/**
+ * Revitalization — a brand-green feature-teaser section.
+ *
+ * Centered eyebrow + display headline + sub + up-to-3 feature pillars
+ * with accent dots + one "notify me" CTA. Content is supplied entirely
+ * via props so the component stays reusable for any coming-soon teaser.
+ */
+defineProps({
+  eyebrow: { type: String, default: '' },
+
+  // Renders in the display serif; `headlineEm` is the italicised
+  // highlight styled to sit on the accent-soft cream tone.
+  headline: { type: String, default: '' },
+  headlineEm: { type: String, default: '' },
+  sub: { type: String, default: '' },
+
+  // Three feature strings. Extra entries are ignored by the slice to
+  // protect the "max three things" invariant visually.
+  features: {
+    type: Array,
+    default: () => [],
+    validator: (arr) => arr.every((v) => typeof v === 'string'),
+  },
+
+  notifyCta: { type: String, default: '' },
+})
+
+defineEmits(['notify'])
+</script>
+
+<template>
+  <section id="revitalize" class="bg-brand text-cream">
+    <div class="mx-auto w-full max-w-6xl px-6 py-16 sm:px-8 sm:py-20 md:px-12 md:py-24 lg:px-16 lg:py-28">
+      <div class="flex flex-col items-center text-center gap-6 max-w-3xl mx-auto">
+        <Badge v-if="eyebrow" variant="accent">{{ eyebrow }}</Badge>
+
+        <h2
+          v-if="headline || headlineEm"
+          class="font-display font-normal leading-[1.04] tracking-tight"
+          style="font-size: clamp(2.25rem, 5vw, 3.75rem);"
+        >
+          {{ headline }}
+          <em
+            v-if="headlineEm"
+            class="italic font-light text-accent-soft"
+          >{{ headlineEm }}</em>
+        </h2>
+
+        <p v-if="sub" class="text-lg leading-relaxed text-cream/80 max-w-2xl">
+          {{ sub }}
+        </p>
+      </div>
+
+      <!-- Three pillars. Stacks on mobile; three-column row from sm up. -->
+      <ul
+        v-if="features.length"
+        class="mt-10 md:mt-14 grid gap-6 sm:grid-cols-3 sm:gap-8 max-w-4xl mx-auto"
+      >
+        <li
+          v-for="feature in features.slice(0, 3)"
+          :key="feature"
+          class="flex flex-col items-center gap-3 text-center"
+        >
+          <span
+            aria-hidden="true"
+            class="inline-block h-2 w-2 rounded-full bg-accent"
+          />
+          <span class="font-sans text-base font-semibold text-cream leading-snug">
+            {{ feature }}
+          </span>
+        </li>
+      </ul>
+
+      <div v-if="notifyCta" class="mt-10 md:mt-14 flex justify-center">
+        <Button variant="accent" size="lg" @click="$emit('notify')">
+          {{ notifyCta }}
+        </Button>
+      </div>
+    </div>
+  </section>
+</template>

src/i18n/messages.js

@@ -6,6 +6,8 @@ const de = {
   // Navbar (also used by the Navbar preview)
   'nav.shop': 'Shop',
   'nav.applications': 'Anwendungen',
+  'nav.bundles': 'Bundles',
+  'nav.revitalization': 'Revitalisierung',
   'nav.about': 'Über uns',
   'nav.contact': 'Kontakt',
   'cart.open': 'Warenkorb öffnen',
@@ -38,6 +40,7 @@ const de = {
   'ds.sidebar.brand': 'Marke',
   'ds.sidebar.tokens': 'Tokens',
   'ds.sidebar.components': 'Komponenten',
+  'ds.sidebar.sections': 'Sektionen',
   'ds.sidebar.back': '← Zurück zur Website',
   'ds.mobile.currentPage': 'Aktuelle Seite',
   'ds.mobile.selectPage': 'Seite auswählen',
@@ -52,12 +55,16 @@ const de = {
   'ds.nav.inputs': 'Eingabefelder',
   'ds.nav.cards': 'Karten',
   'ds.nav.products': 'Produktkarten',
+  'ds.nav.bundleCard': 'Bundle-Karte',
   'ds.nav.hero': 'Hero',
   'ds.nav.navbar': 'Navigation',
   'ds.nav.search': 'Suche',
   'ds.nav.qtyStepper': 'Mengenwähler',
   'ds.nav.cartDrawer': 'Warenkorb',
   'ds.nav.language': 'Sprachwahl',
+  'ds.nav.bundles': 'Bundles-Sektion',
+  'ds.nav.revitalization': 'Revitalization',
+  'ds.nav.about': 'Über uns',
 
   // Search overlay
   'ds.search.title': 'Suche',
@@ -237,6 +244,58 @@ const de = {
   'home.banner.headline.b': 'im Haushalt.',
   'home.banner.sub': 'Vom Kuchen über das Bad bis zur Wäsche – Kaiser-Natron leistet überall still und zuverlässig seine Arbeit.',
 
+  // Bundles section — copy for the sidebar, card chrome, and carousel.
+  'bundles.headline.a': 'Bundles &',
+  'bundles.headline.em': 'Vorteile',
+  'bundles.sub': 'Als Mitglied sparst du durch Staffelrabatte, exklusive Bundle-Deals und Frühzugang auf neue Produkte.',
+  'bundles.benefit.1.title': 'Staffelrabatt bis −25 %',
+  'bundles.benefit.2.title': 'Exklusive Bundle-Deals',
+  'bundles.benefit.3.title': 'Frühzugang & Neuheiten',
+  'bundles.joinCta': 'Mitglied werden',
+  'bundles.card.priceLabel': 'Verkaufspreis',
+  'bundles.card.memberPrefix': 'Mitglieder:',
+  'bundles.card.moreItems': 'weitere',
+  // Carousel chrome — lives under ds.* because it belongs to the Bundles
+  // component itself, not to any particular page's content.
+  'ds.bundles.carousel.label': 'Bundle-Karussell',
+  'ds.bundles.carousel.prev': 'Vorheriges Bundle',
+  'ds.bundles.carousel.next': 'Nächstes Bundle',
+  'ds.bundles.carousel.goToSlide': 'Zu Bundle',
+
+  // Design-system documentation pages (BundleCard, Bundles, Revitalization, About)
+  'ds.bundleCard.title': 'Bundle-Karte',
+  'ds.bundleCard.description': 'Zusammengesetzte Karte für kuratierte Produktpakete. Medien mit optionalem Badge, Nutzungs-Label, Titel, bis zu drei Artikeln, Preisblock (inkl. Mitgliederpreis) und Primär-CTA. Zwei Layouts — vertikal für Raster, horizontal für Karussell-Slides von md aufwärts.',
+  'ds.bundles.title': 'Bundles-Sektion',
+  'ds.bundles.description': 'Kompound-Sektion mit fixer Sidebar (Headline + drei Vorteile + Mitglieder-CTA) und einem Scroll-Snap-Karussell mit horizontalen Bundle-Karten von md aufwärts. Tastatur und Touch-Swipe funktionieren out of the box; die Pfeile loopen am Ende zurück zum Anfang.',
+  'ds.revitalization.title': 'Revitalization Center',
+  'ds.revitalization.description': 'Zentrierte Feature-Teaser-Sektion auf Markengrün. Eyebrow-Badge, Display-Headline mit italic-Highlight, Unterzeile, bis zu drei Pillar-Punkte mit Akzent-Dots und ein einzelner CTA. Gedacht für „Demnächst"-Ankündigungen.',
+  'ds.about.title': 'About / Geschichte',
+  'ds.about.description': 'Zentrierte Intro-Zone plus drei Meilenstein-Karten in den drei Flächentönen (Papier / Creme / Marke) von links nach rechts. Fortlaufende Tonabfolge gibt der Zeitachse visuelle Progression.',
+
+  // Revitalization Center — brand-green coming-soon section.
+  'revit.eyebrow': 'Demnächst',
+  'revit.headline.a': 'Revitalization',
+  'revit.headline.em': 'Center',
+  'revit.sub': 'Ein eigenes Wissens-Universum für NaHCO₃ – Wissenschaft, Therapiekonzepte und professionelle Anwendungsguides. Mehr als ein Shop.',
+  'revit.feature.1.title': 'Wissenschaft',
+  'revit.feature.2.title': 'Therapie',
+  'revit.feature.3.title': 'Natürlich heilen',
+  'revit.notifyCta': 'Early Access sichern',
+
+  // About / History — cream section, three milestones.
+  'about.eyebrow': 'Geschichte & Wissenschaft',
+  'about.headline': 'Über Kaiser-Natron®',
+  'about.sub': 'Mehr als 140 Jahre Tradition, Reinheit und die Wissenschaft hinter dem Unterschied.',
+  'about.milestone.1.year': '1881',
+  'about.milestone.1.title': 'Die Gründung',
+  'about.milestone.1.text': 'Arnold Holste gründet in Bielefeld das Unternehmen, das Kaiser-Natron® zur Welt bringt – reines Natriumhydrogencarbonat in Lebensmittelqualität, zu einer Zeit, als Chemie noch Handwerk war.',
+  'about.milestone.2.year': 'Früh 1900er',
+  'about.milestone.2.title': 'Die Ikone entsteht',
+  'about.milestone.2.text': 'Kaiser-Natron® wird zum Haushalts-Klassiker im deutschsprachigen Raum. Großmütter schwören auf seine universelle Kraft – vom Backen bis zum Reinigen.',
+  'about.milestone.3.year': 'Heute',
+  'about.milestone.3.title': 'Premium-Standard E500(ii)',
+  'about.milestone.3.text': 'Kaiser-Natron® trägt die Lebensmittelzulassung E500(ii) – extra gereinigt, standardisiert und chargenweise geprüft. Das Original bleibt unverändert gut.',
+
   // Search section
   'ds.search.title': 'Produktsuche',
   'ds.search.description': 'Suchknopf rechts in der Navbar (links der Sprachwahl) und links unten als Floating-Button auf dem Telefon. Klick öffnet ein Full-Screen-Overlay auf Mobilgeräten bzw. ein zentriertes Panel auf dem Desktop. Eingabefeld ist autofokussiert, Ergebnisliste aktualisiert sich beim Tippen, Pfeiltasten / Enter / Esc werden unterstützt.',
@@ -306,6 +365,8 @@ const atOverrides = {
 const en = {
   'nav.shop': 'Shop',
   'nav.applications': 'Uses',
+  'nav.bundles': 'Bundles',
+  'nav.revitalization': 'Revitalisation',
   'nav.about': 'About',
   'nav.contact': 'Contact',
   'cart.open': 'Open cart',
@@ -337,6 +398,7 @@ const en = {
   'ds.sidebar.brand': 'Brand',
   'ds.sidebar.tokens': 'Tokens',
   'ds.sidebar.components': 'Components',
+  'ds.sidebar.sections': 'Sections',
   'ds.sidebar.back': '← Back to site',
   'ds.mobile.currentPage': 'Current page',
   'ds.mobile.selectPage': 'Select a page',
@@ -351,12 +413,16 @@ const en = {
   'ds.nav.inputs': 'Inputs',
   'ds.nav.cards': 'Cards',
   'ds.nav.products': 'Product cards',
+  'ds.nav.bundleCard': 'Bundle card',
   'ds.nav.hero': 'Hero',
   'ds.nav.navbar': 'Navbar',
   'ds.nav.search': 'Search',
   'ds.nav.qtyStepper': 'Quantity stepper',
   'ds.nav.cartDrawer': 'Cart',
   'ds.nav.language': 'Language',
+  'ds.nav.bundles': 'Bundles section',
+  'ds.nav.revitalization': 'Revitalization',
+  'ds.nav.about': 'About',
 
   'ds.search.title': 'Search',
   'ds.search.description': 'Full-text search across the product catalog with image previews. Full-screen overlay on mobile, centered command palette on desktop. Keyboard-navigable and brand-green by default.',
@@ -521,6 +587,57 @@ const en = {
   'home.banner.headline.b': 'around the home.',
   'home.banner.sub': 'From baking to bathing to laundry — Kaiser Natron quietly does its work wherever you need it.',
 
+  // Bundles section
+  'bundles.headline.a': 'Bundles &',
+  'bundles.headline.em': 'Benefits',
+  'bundles.sub': 'Members save with tiered discounts, exclusive bundle deals, and early access to new products.',
+  'bundles.benefit.1.title': 'Tiered discount up to −25%',
+  'bundles.benefit.2.title': 'Exclusive bundle deals',
+  'bundles.benefit.3.title': 'Early access & new releases',
+  'bundles.joinCta': 'Become a member',
+  'bundles.card.priceLabel': 'Retail price',
+  'bundles.card.memberPrefix': 'Members:',
+  'bundles.card.moreItems': 'more',
+  // Carousel chrome — ds.* because it belongs to the Bundles component.
+  'ds.bundles.carousel.label': 'Bundle carousel',
+  'ds.bundles.carousel.prev': 'Previous bundle',
+  'ds.bundles.carousel.next': 'Next bundle',
+  'ds.bundles.carousel.goToSlide': 'Go to bundle',
+
+  // Design-system documentation pages
+  'ds.bundleCard.title': 'Bundle card',
+  'ds.bundleCard.description': 'Composed card for curated product bundles. Media with optional badge, usage label, title, up to three line items, a price block (retail + member price) and a primary CTA. Two layouts — vertical for grid use and horizontal for carousel slides from md up.',
+  'ds.bundles.title': 'Bundles section',
+  'ds.bundles.description': 'Compound section combining a sticky sidebar (headline + three benefits + member CTA) with a scroll-snap carousel of horizontal bundle cards from md up. Keyboard and touch swipe work natively; the arrow controls loop past the ends.',
+  'ds.revitalization.title': 'Revitalization Center',
+  'ds.revitalization.description': 'Centered feature-teaser section on brand green. Eyebrow badge, display headline with an italic highlight, subheadline, up to three pillar bullets with accent dots and a single CTA. Designed for "coming soon" announcements.',
+  'ds.about.title': 'About / history',
+  'ds.about.description': 'Centered intro plus three milestone cards running the Card primitive\'s tones left-to-right (paper / cream / brand). The continuous tonal step gives the timeline a clear sense of visual progression.',
+
+  // Revitalization Center
+  'revit.eyebrow': 'Coming soon',
+  'revit.headline.a': 'Revitalization',
+  'revit.headline.em': 'Center',
+  'revit.sub': 'A dedicated knowledge universe for NaHCO₃ — science, therapy concepts, and professional application guides. More than a shop.',
+  'revit.feature.1.title': 'Science',
+  'revit.feature.2.title': 'Therapy',
+  'revit.feature.3.title': 'Natural healing',
+  'revit.notifyCta': 'Get early access',
+
+  // About / History
+  'about.eyebrow': 'History & science',
+  'about.headline': 'About Kaiser-Natron®',
+  'about.sub': 'More than 140 years of tradition, purity, and the science behind the difference.',
+  'about.milestone.1.year': '1881',
+  'about.milestone.1.title': 'The founding',
+  'about.milestone.1.text': 'Arnold Holste founds the company in Bielefeld that brings Kaiser-Natron® into the world — pure sodium bicarbonate at food grade, at a time when chemistry was still a craft.',
+  'about.milestone.2.year': 'Early 1900s',
+  'about.milestone.2.title': 'The icon emerges',
+  'about.milestone.2.text': "Kaiser-Natron® becomes a household staple across German-speaking countries. Grandmothers swear by its universal power — from baking to cleaning.",
+  'about.milestone.3.year': 'Today',
+  'about.milestone.3.title': 'Premium E500(ii) standard',
+  'about.milestone.3.text': 'Kaiser-Natron® carries the E500(ii) food-grade approval — extra purified, standardised, and batch-tested. The original, as good as ever.',
+
   'ds.search.title': 'Product search',
   'ds.search.description': 'Search trigger on the right of the navbar (left of the language switcher) and bottom-left as a floating button on mobile. Tapping it opens a full-screen overlay on mobile and a centered panel on desktop. The input auto-focuses, the results list updates as you type, and arrow keys / Enter / Esc are supported.',
   'ds.search.demo.label': 'Open demo',

src/pages/HomePage.vue

@@ -1,7 +1,10 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import Navbar from '@/design-system/components/Navbar.vue'
 import Hero from '@/design-system/components/Hero.vue'
+import Bundles from '@/design-system/components/Bundles.vue'
+import Revitalization from '@/design-system/components/Revitalization.vue'
+import About from '@/design-system/components/About.vue'
 import CartDrawer from '@/design-system/components/CartDrawer.vue'
 import {
   products,
@@ -27,6 +30,101 @@ const imgBanner =
   '/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png'
 const bannerProductId = 'kaiser-natron-pulver-250-g-grosspackung'
 
+// Homepage top-level nav items — overrides the Navbar default so the
+// homepage reads as the shop entry point (Shop / Bundles / Revitalisierung
+// / Über uns) instead of the generic catalogue chrome.
+const navItems = [
+  { key: 'nav.shop', href: '#' },
+  { key: 'nav.bundles', href: '#bundles' },
+  { key: 'nav.revitalization', href: '#revitalize' },
+  { key: 'nav.about', href: '#about' },
+]
+
+// Bundles sidebar copy resolves through the page's own i18n namespace so
+// component internals stay decoupled from any particular key tree.
+const bundlesCopy = computed(() => ({
+  headline: t('bundles.headline.a'),
+  headlineEm: t('bundles.headline.em'),
+  sub: t('bundles.sub'),
+  joinCta: t('bundles.joinCta'),
+  benefits: [
+    t('bundles.benefit.1.title'),
+    t('bundles.benefit.2.title'),
+    t('bundles.benefit.3.title'),
+  ],
+}))
+
+const revitCopy = computed(() => ({
+  eyebrow: t('revit.eyebrow'),
+  headline: t('revit.headline.a'),
+  headlineEm: t('revit.headline.em'),
+  sub: t('revit.sub'),
+  notifyCta: t('revit.notifyCta'),
+  features: [
+    t('revit.feature.1.title'),
+    t('revit.feature.2.title'),
+    t('revit.feature.3.title'),
+  ],
+}))
+
+const aboutCopy = computed(() => ({
+  eyebrow: t('about.eyebrow'),
+  headline: t('about.headline'),
+  sub: t('about.sub'),
+  milestones: [1, 2, 3].map((i) => ({
+    year: t(`about.milestone.${i}.year`),
+    title: t(`about.milestone.${i}.title`),
+    text: t(`about.milestone.${i}.text`),
+  })),
+}))
+
+// Three curated bundles. Each caps items at three to honour the
+// "max three things" rule — Haushalts and Wäsche are trimmed to their
+// most distinctive products; Wohlfühl is naturally three already.
+const bundles = [
+  {
+    id: 'haushalt',
+    name: 'Haushalts-Bundle',
+    usage: '2–3× pro Quartal empfohlen',
+    items: [
+      '1× Kaiser-Natron Pulver 250 g',
+      '1× Allzweck-Spray 500 ml',
+      '1× Spülmittel 500 ml',
+    ],
+    price: 24.9,
+    memberPrice: 21.17,
+    image:
+      '/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png',
+    imageAlt: 'Haushalts-Bundle mit Kaiser-Natron',
+    badge: 'Bestseller',
+    badgeVariant: 'accent',
+  },
+  {
+    id: 'waesche',
+    name: 'Wäsche & Pflege',
+    usage: '1–2× pro Quartal',
+    items: ['1× Holste Wasch-Soda 500 g', '1× Gazelle Wäschestärke 1 l', '1× Linda Fleckenweg 200 ml'],
+    price: 22.9,
+    memberPrice: 19.47,
+    image: '/products/holste-wasch-soda-500-g-beutel.jpg',
+    imageAlt: 'Wäsche & Pflege Bundle',
+    badge: '',
+    badgeVariant: 'accent',
+  },
+  {
+    id: 'wohlfuehl',
+    name: 'Wohlfühl-Bundle',
+    usage: '1× pro Quartal',
+    items: ['1× Kaiser-Natron Tabletten 100 g', '1× Kaiser-Natron Bad 500 g', '1× Kaiser-Natron Fußbad 500 g'],
+    price: 29.9,
+    memberPrice: 25.42,
+    image: '/products/kaiser-natron-bad-500-g.jpg',
+    imageAlt: 'Wohlfühl-Bundle mit Kaiser-Natron Bad',
+    badge: '',
+    badgeVariant: 'accent',
+  },
+]
+
 async function onHeroAdd() {
   await addToCart(heroProductId, 1)
   cartOpen.value = true
@@ -37,6 +135,36 @@ async function onBannerAdd() {
   cartOpen.value = true
 }
 
+// Bundles share a single "add" handler. Until the backend exposes a
+// real bundle SKU endpoint, the UI stand-in adds the bundle's anchor
+// product to the cart so the user gets visible feedback. The mapping
+// lives here (not on the bundle object) to keep the bundle config
+// decoupled from the fixture-driven cart.
+const bundleAnchorProduct = {
+  haushalt: 'kaiser-natron-pulver-250-g-grosspackung',
+  waesche: 'holste-wasch-soda-500-g-beutel',
+  wohlfuehl: 'kaiser-natron-bad-500-g',
+}
+
+async function onBundleAdd(bundleId) {
+  const productId = bundleAnchorProduct[bundleId]
+  if (!productId) return
+  await addToCart(productId, 1)
+  cartOpen.value = true
+}
+
+function onBundleJoin() {
+  // Placeholder — member signup flow is a backend concern. For now,
+  // clicking "Mitglied werden" simply scrolls to the bundles grid.
+  const el = document.getElementById('bundles')
+  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+function onRevitNotify() {
+  // Placeholder — early-access capture goes to the backend once wired.
+  // No-op for the demo.
+}
+
 async function onQty({ productId, quantity }) {
   await updateCartItem(productId, quantity)
 }
@@ -70,6 +198,7 @@ onMounted(() => {
     <Navbar
       variant="brand"
       layout="standard"
+      :items="navItems"
       :cart-count="cart.count"
       :products="products"
       @cart="cartOpen = true"
@@ -144,6 +273,93 @@ onMounted(() => {
     </template>
   </Hero>
 
+  <!-- Cream → surface wave between the second banner and the bundles
+       section. Same construction as the green→cream wave on the first
+       fold: solid rect fills the destination color (surface), a path
+       paints the wavy top in the source color (cream). `-mb-px` overlaps
+       the bundles section by a device pixel to hide hairline seams. -->
+  <svg
+    aria-hidden="true"
+    class="block w-full h-12 md:h-16 shrink-0 -mb-px bg-cream"
+    viewBox="0 0 1440 64"
+    preserveAspectRatio="none"
+  >
+    <rect width="1440" height="64" fill="var(--color-surface)" />
+    <path
+      d="M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z"
+      fill="var(--color-cream)"
+    />
+  </svg>
+
+  <!-- Bundles — surface (warm off-white) so the cream banner above and the
+       cream cards below both stand out as distinct layers. Three bundles,
+       three items per bundle, three benefits. Mobile stacks the cards;
+       md+ flips to a one-at-a-time scroll-snap carousel. -->
+  <Bundles
+    class="-mt-px"
+    :bundles="bundles"
+    :headline="bundlesCopy.headline"
+    :headline-em="bundlesCopy.headlineEm"
+    :sub="bundlesCopy.sub"
+    :benefits="bundlesCopy.benefits"
+    :join-cta="bundlesCopy.joinCta"
+    @add="onBundleAdd"
+    @join="onBundleJoin"
+  />
+
+  <!-- Surface → brand wave. rect is the destination (brand), path is the
+       source (surface) painted over the top of the wave. -->
+  <svg
+    aria-hidden="true"
+    class="block w-full h-12 md:h-16 shrink-0 -mb-px bg-surface"
+    viewBox="0 0 1440 64"
+    preserveAspectRatio="none"
+  >
+    <rect width="1440" height="64" fill="var(--color-brand)" />
+    <path
+      d="M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z"
+      fill="var(--color-surface)"
+    />
+  </svg>
+
+  <!-- Revitalization Center — brand green "coming soon" section. Three
+       pillars (science / therapy / natural healing), single CTA. -->
+  <Revitalization
+    class="-mt-px"
+    :eyebrow="revitCopy.eyebrow"
+    :headline="revitCopy.headline"
+    :headline-em="revitCopy.headlineEm"
+    :sub="revitCopy.sub"
+    :features="revitCopy.features"
+    :notify-cta="revitCopy.notifyCta"
+    @notify="onRevitNotify"
+  />
+
+  <!-- Brand → cream wave. Same construction as the first-fold wave, just
+       between the revit section and the about section. -->
+  <svg
+    aria-hidden="true"
+    class="block w-full h-12 md:h-16 shrink-0 -mb-px bg-brand"
+    viewBox="0 0 1440 64"
+    preserveAspectRatio="none"
+  >
+    <rect width="1440" height="64" fill="var(--color-cream)" />
+    <path
+      d="M0,0 L0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,0 Z"
+      fill="var(--color-brand)"
+    />
+  </svg>
+
+  <!-- About / History — cream section, three milestones (1881 / early
+       1900s / today) rendered as paper cards on the cream surface. -->
+  <About
+    class="-mt-px"
+    :eyebrow="aboutCopy.eyebrow"
+    :headline="aboutCopy.headline"
+    :sub="aboutCopy.sub"
+    :milestones="aboutCopy.milestones"
+  />
+
   <!-- Bottom clearance for the mobile floating cluster (search / cart / menu).
        Cluster sits at bottom-5 (20px) + safe-area, is 56px tall, and needs a
        24px breathing gap above it: 20 + 56 + 24 = 100px, plus the device's

src/pages/design/AboutSection.vue

@@ -0,0 +1,50 @@
+<script setup>
+import SectionShell from './SectionShell.vue'
+import DevicePreview from '@/design-system/components/DevicePreview.vue'
+import { useI18n } from '@/i18n/index.js'
+
+const { t } = useI18n()
+const src = '/design/preview/about'
+</script>
+
+<template>
+  <SectionShell
+    :eyebrow="t('ds.eyebrow.components')"
+    :title="t('ds.about.title')"
+    :description="t('ds.about.description')"
+    wide
+  >
+    <section>
+      <DevicePreview :src="src" initial="desktop" :height="820" />
+    </section>
+
+    <section>
+      <h2 class="eyebrow mb-5">{{ t('ds.heading.usage') }}</h2>
+      <div class="rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink">
+<pre class="whitespace-pre-wrap">&lt;About
+  :eyebrow="t('about.eyebrow')"
+  :headline="t('about.headline')"
+  :sub="t('about.sub')"
+  :milestones="[1, 2, 3].map((i) =&gt; ({
+    year: t(`about.milestone.${i}.year`),
+    title: t(`about.milestone.${i}.title`),
+    text: t(`about.milestone.${i}.text`),
+  }))"
+/&gt;</pre>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="eyebrow mb-5">Tone sequence</h2>
+      <p class="text-sm text-muted max-w-2xl">
+        The three milestone cards cycle the Card primitive's tones left-to-right:
+        <code class="font-mono text-[12px]">paper</code> →
+        <code class="font-mono text-[12px]">cream</code> →
+        <code class="font-mono text-[12px]">brand</code>. The sequence is part of
+        the component's visual contract and is not configurable — see
+        <code class="font-mono text-[12px]">CARD_TONES</code> in
+        <code class="font-mono text-[12px]">About.vue</code>.
+      </p>
+    </section>
+  </SectionShell>
+</template>

src/pages/design/BundleCardSection.vue

@@ -0,0 +1,131 @@
+<script setup>
+import { ref } from 'vue'
+import SectionShell from './SectionShell.vue'
+import BundleCard from '@/design-system/components/BundleCard.vue'
+import { useI18n } from '@/i18n/index.js'
+
+const { t } = useI18n()
+
+const lastAdded = ref('')
+function onAdd(id) {
+  lastAdded.value = id
+  setTimeout(() => {
+    if (lastAdded.value === id) lastAdded.value = ''
+  }, 2000)
+}
+
+// One shared product fixture across the whole page. Using the transparent
+// cutout (not the jpg product shot) because it sits cleanly on the cream
+// media panel without a visible square crop edge.
+const sampleImage =
+  '/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png'
+
+const sample = {
+  name: 'Haushalts-Bundle',
+  usage: '2–3× pro Quartal empfohlen',
+  items: [
+    '1× Kaiser-Natron Pulver 250 g',
+    '1× Allzweck-Spray 500 ml',
+    '1× Spülmittel 500 ml',
+  ],
+  price: 24.9,
+  memberPrice: 21.17,
+  image: sampleImage,
+  imageAlt: 'Haushalts-Bundle',
+}
+
+// For the "overflow" state — same bundle identity, extra items so the
+// `+ N weitere` line renders.
+const sampleWithOverflow = {
+  ...sample,
+  items: [
+    ...sample.items,
+    '1× Holste Wasch-Soda 500 g',
+    '1× Allzweckreiniger 750 ml',
+  ],
+}
+</script>
+
+<template>
+  <SectionShell
+    :eyebrow="t('ds.eyebrow.components')"
+    :title="t('ds.bundleCard.title')"
+    :description="t('ds.bundleCard.description')"
+  >
+    <section>
+      <h2 class="eyebrow mb-5">{{ t('ds.heading.default') }}</h2>
+      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <BundleCard v-bind="sample" @add="onAdd('default')" />
+        <BundleCard
+          v-bind="sample"
+          badge="Bestseller"
+          badge-variant="accent"
+          @add="onAdd('bestseller')"
+        />
+        <BundleCard v-bind="sample" tone="cream" @add="onAdd('cream')" />
+      </div>
+      <p v-if="lastAdded" class="mt-5 text-sm text-muted">
+        {{ t('ds.product.added') }}: <code class="font-mono text-[12px]">{{ lastAdded }}</code>
+      </p>
+    </section>
+
+    <section>
+      <h2 class="eyebrow mb-5">Horizontal layout</h2>
+      <p class="text-sm text-muted mb-5 max-w-2xl">
+        Passed as <code class="font-mono text-[12px]">layout="horizontal"</code>. From
+        <code class="font-mono text-[12px]">md</code> up the media takes ~38% of the row and
+        the body fills the rest, with the CTA inlined next to the price block. Below
+        <code class="font-mono text-[12px]">md</code> it collapses back to vertical.
+      </p>
+      <div class="grid gap-6">
+        <BundleCard
+          v-bind="sample"
+          layout="horizontal"
+          badge="Bestseller"
+          badge-variant="accent"
+          @add="onAdd('horizontal')"
+        />
+      </div>
+    </section>
+
+    <section>
+      <h2 class="eyebrow mb-5">{{ t('ds.heading.states') }}</h2>
+      <p class="text-sm text-muted mb-5 max-w-2xl">
+        Same bundle across both cards — only the state being demonstrated changes.
+      </p>
+      <div class="grid sm:grid-cols-2 gap-6">
+        <!-- Out of stock -->
+        <BundleCard v-bind="sample" :in-stock="false" />
+        <!-- More than three items → "+ N weitere" overflow line -->
+        <BundleCard v-bind="sampleWithOverflow" @add="onAdd('overflow')" />
+      </div>
+      <p class="mt-3 text-sm text-muted max-w-2xl">
+        More than three items collapse the tail into a <code class="font-mono text-[12px]">+ N weitere</code>
+        line so the card stays scannable.
+      </p>
+    </section>
+
+    <section>
+      <h2 class="eyebrow mb-5">{{ t('ds.heading.usage') }}</h2>
+      <div class="rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink">
+<pre class="whitespace-pre-wrap">&lt;BundleCard
+  name="Haushalts-Bundle"
+  usage="2–3× pro Quartal empfohlen"
+  :items="[
+    '1× Kaiser-Natron Pulver 250 g',
+    '1× Allzweck-Spray 500 ml',
+    '1× Spülmittel 500 ml',
+  ]"
+  :price="24.9"
+  :member-price="21.17"
+  image="/products/cutouts/…-removebg-preview.png"
+  badge="Bestseller"
+  badge-variant="accent"
+  tone="paper"
+  layout="horizontal"
+  @add="addBundle(bundleId)"
+/&gt;</pre>
+      </div>
+    </section>
+  </SectionShell>
+</template>

src/pages/design/BundlesSection.vue

@@ -0,0 +1,88 @@
+<script setup>
+import SectionShell from './SectionShell.vue'
+import DevicePreview from '@/design-system/components/DevicePreview.vue'
+import { useI18n } from '@/i18n/index.js'
+
+const { t } = useI18n()
+
+// The Bundles component is full-width and responsive with a carousel from
+// md up — iframe it through DevicePreview so we can demo mobile / tablet /
+// desktop breakpoints side by side rather than squeezing into the docs
+// column at a single width.
+const src = '/design/preview/bundles'
+</script>
+
+<template>
+  <SectionShell
+    :eyebrow="t('ds.eyebrow.components')"
+    :title="t('ds.bundles.title')"
+    :description="t('ds.bundles.description')"
+    wide
+  >
+    <section>
+      <DevicePreview :src="src" initial="desktop" :height="1080" />
+    </section>
+
+    <section>
+      <h2 class="eyebrow mb-5">{{ t('ds.heading.usage') }}</h2>
+      <div class="rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink">
+<pre class="whitespace-pre-wrap">&lt;Bundles
+  :bundles="bundles"
+  :headline="t('bundles.headline.a')"
+  :headline-em="t('bundles.headline.em')"
+  :sub="t('bundles.sub')"
+  :benefits="[
+    t('bundles.benefit.1.title'),
+    t('bundles.benefit.2.title'),
+    t('bundles.benefit.3.title'),
+  ]"
+  :join-cta="t('bundles.joinCta')"
+  @add="addBundle(bundleId)"
+  @join="openSignup()"
+/&gt;</pre>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="eyebrow mb-5">Props</h2>
+      <div class="rounded-md border border-line bg-paper overflow-x-auto">
+        <table class="w-full text-left text-[13px]">
+          <thead class="bg-surface border-b border-line">
+            <tr>
+              <th class="px-5 py-3 font-semibold tracking-label text-muted uppercase text-[11px]">Prop</th>
+              <th class="px-5 py-3 font-semibold tracking-label text-muted uppercase text-[11px]">Type</th>
+              <th class="px-5 py-3 font-semibold tracking-label text-muted uppercase text-[11px]">Purpose</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-line">
+            <tr>
+              <td class="px-5 py-3 font-mono text-[12px]">bundles</td>
+              <td class="px-5 py-3 text-muted">Array</td>
+              <td class="px-5 py-3">Required. Array of bundle records rendered by BundleCard.</td>
+            </tr>
+            <tr>
+              <td class="px-5 py-3 font-mono text-[12px]">headline / headlineEm / sub</td>
+              <td class="px-5 py-3 text-muted">String</td>
+              <td class="px-5 py-3">Sidebar copy; <code class="font-mono text-[12px]">headlineEm</code> is the italicised highlight.</td>
+            </tr>
+            <tr>
+              <td class="px-5 py-3 font-mono text-[12px]">benefits</td>
+              <td class="px-5 py-3 text-muted">String[]</td>
+              <td class="px-5 py-3">Sidebar benefit bullets. First three are shown.</td>
+            </tr>
+            <tr>
+              <td class="px-5 py-3 font-mono text-[12px]">joinCta</td>
+              <td class="px-5 py-3 text-muted">String</td>
+              <td class="px-5 py-3">Label for the sidebar's primary button. Emits <code class="font-mono text-[12px]">join</code>.</td>
+            </tr>
+            <tr>
+              <td class="px-5 py-3 font-mono text-[12px]">carousel*Label</td>
+              <td class="px-5 py-3 text-muted">String</td>
+              <td class="px-5 py-3">Override the default carousel a11y labels (prev / next / goToSlide / region label).</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </SectionShell>
+</template>

src/pages/design/DesignLayout.vue

@@ -35,6 +35,7 @@ const groups = computed(() => [
       { name: 'ds-inputs', label: t('ds.nav.inputs') },
       { name: 'ds-cards', label: t('ds.nav.cards') },
       { name: 'ds-products', label: t('ds.nav.products') },
+      { name: 'ds-bundle-card', label: t('ds.nav.bundleCard') },
       { name: 'ds-hero', label: t('ds.nav.hero') },
       { name: 'ds-navbar', label: t('ds.nav.navbar') },
       { name: 'ds-search', label: t('ds.nav.search') },
@@ -43,6 +44,14 @@ const groups = computed(() => [
       { name: 'ds-language', label: t('ds.nav.language') },
     ],
   },
+  {
+    title: t('ds.sidebar.sections'),
+    items: [
+      { name: 'ds-bundles', label: t('ds.nav.bundles') },
+      { name: 'ds-revitalization', label: t('ds.nav.revitalization') },
+      { name: 'ds-about', label: t('ds.nav.about') },
+    ],
+  },
 ])
 
 const flatItems = computed(() => groups.value.flatMap((g) => g.items))

src/pages/design/RevitalizationSection.vue

@@ -0,0 +1,40 @@
+<script setup>
+import SectionShell from './SectionShell.vue'
+import DevicePreview from '@/design-system/components/DevicePreview.vue'
+import { useI18n } from '@/i18n/index.js'
+
+const { t } = useI18n()
+const src = '/design/preview/revitalization'
+</script>
+
+<template>
+  <SectionShell
+    :eyebrow="t('ds.eyebrow.components')"
+    :title="t('ds.revitalization.title')"
+    :description="t('ds.revitalization.description')"
+    wide
+  >
+    <section>
+      <DevicePreview :src="src" initial="desktop" :height="720" />
+    </section>
+
+    <section>
+      <h2 class="eyebrow mb-5">{{ t('ds.heading.usage') }}</h2>
+      <div class="rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink">
+<pre class="whitespace-pre-wrap">&lt;Revitalization
+  :eyebrow="t('revit.eyebrow')"
+  :headline="t('revit.headline.a')"
+  :headline-em="t('revit.headline.em')"
+  :sub="t('revit.sub')"
+  :features="[
+    t('revit.feature.1.title'),
+    t('revit.feature.2.title'),
+    t('revit.feature.3.title'),
+  ]"
+  :notify-cta="t('revit.notifyCta')"
+  @notify="captureEmail()"
+/&gt;</pre>
+      </div>
+    </section>
+  </SectionShell>
+</template>

src/pages/design/previews/AboutPreview.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { computed } from 'vue'
+import About from '@/design-system/components/About.vue'
+import { useI18n } from '@/i18n/index.js'
+
+const { t } = useI18n()
+
+const milestones = computed(() =>
+  [1, 2, 3].map((i) => ({
+    year: t(`about.milestone.${i}.year`),
+    title: t(`about.milestone.${i}.title`),
+    text: t(`about.milestone.${i}.text`),
+  })),
+)
+</script>
+
+<template>
+  <div class="min-h-screen bg-cream">
+    <About
+      :eyebrow="t('about.eyebrow')"
+      :headline="t('about.headline')"
+      :sub="t('about.sub')"
+      :milestones="milestones"
+    />
+  </div>
+</template>

src/pages/design/previews/BundlesPreview.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'vue'
+import Bundles from '@/design-system/components/Bundles.vue'
+import { useI18n } from '@/i18n/index.js'
+
+const { t } = useI18n()
+
+// Demo fixtures — mirrors HomePage's real content so the preview is
+// representative rather than lorem-ipsum. Kept inline because preview
+// pages are standalone by design: no imports from the pages layer.
+const bundles = [
+  {
+    id: 'haushalt',
+    name: 'Haushalts-Bundle',
+    usage: '2–3× pro Quartal empfohlen',
+    items: [
+      '1× Kaiser-Natron Pulver 250 g',
+      '1× Allzweck-Spray 500 ml',
+      '1× Spülmittel 500 ml',
+    ],
+    price: 24.9,
+    memberPrice: 21.17,
+    image:
+      '/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png',
+    imageAlt: 'Haushalts-Bundle mit Kaiser-Natron',
+    badge: 'Bestseller',
+    badgeVariant: 'accent',
+  },
+  {
+    id: 'waesche',
+    name: 'Wäsche & Pflege',
+    usage: '1–2× pro Quartal',
+    items: [
+      '1× Holste Wasch-Soda 500 g',
+      '1× Gazelle Wäschestärke 1 l',
+      '1× Linda Fleckenweg 200 ml',
+    ],
+    price: 22.9,
+    memberPrice: 19.47,
+    image: '/products/holste-wasch-soda-500-g-beutel.jpg',
+    imageAlt: 'Wäsche & Pflege Bundle',
+  },
+  {
+    id: 'wohlfuehl',
+    name: 'Wohlfühl-Bundle',
+    usage: '1× pro Quartal',
+    items: [
+      '1× Kaiser-Natron Tabletten 100 g',
+      '1× Kaiser-Natron Bad 500 g',
+      '1× Kaiser-Natron Fußbad 500 g',
+    ],
+    price: 29.9,
+    memberPrice: 25.42,
+    image: '/products/kaiser-natron-bad-500-g.jpg',
+    imageAlt: 'Wohlfühl-Bundle',
+  },
+]
+
+const benefits = computed(() => [
+  t('bundles.benefit.1.title'),
+  t('bundles.benefit.2.title'),
+  t('bundles.benefit.3.title'),
+])
+</script>
+
+<template>
+  <div class="min-h-screen bg-surface">
+    <Bundles
+      :bundles="bundles"
+      :headline="t('bundles.headline.a')"
+      :headline-em="t('bundles.headline.em')"
+      :sub="t('bundles.sub')"
+      :benefits="benefits"
+      :join-cta="t('bundles.joinCta')"
+    />
+  </div>
+</template>

src/pages/design/previews/RevitalizationPreview.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { computed } from 'vue'
+import Revitalization from '@/design-system/components/Revitalization.vue'
+import { useI18n } from '@/i18n/index.js'
+
+const { t } = useI18n()
+
+const features = computed(() => [
+  t('revit.feature.1.title'),
+  t('revit.feature.2.title'),
+  t('revit.feature.3.title'),
+])
+</script>
+
+<template>
+  <div class="min-h-screen bg-brand">
+    <Revitalization
+      :eyebrow="t('revit.eyebrow')"
+      :headline="t('revit.headline.a')"
+      :headline-em="t('revit.headline.em')"
+      :sub="t('revit.sub')"
+      :features="features"
+      :notify-cta="t('revit.notifyCta')"
+    />
+  </div>
+</template>