lfg2025/kaiser-natron
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates to new sections and design system page

Browse Source
This commit is contained in:
Dorian
2026-04-23 15:02:54 +01:00
parent b183c1c480
commit f001d65c7f
58 changed files with 500 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/assets/AboutPreview-CQp5gTx4.js → dist/assets/AboutPreview-38kzGlmI.js vendored
View File

@@ -1 +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-CtiMkkHe.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};
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-DrTQks20.js";import{t as o}from"./About-CtiMkkHe.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};

2
dist/assets/AboutSection-DcRq8WoQ.js → dist/assets/AboutSection-D5VEtD1J.js vendored
View File

@@ -1,4 +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"./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
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-DrTQks20.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')"

2
dist/assets/BadgesSection-7hDbaVWU.js → dist/assets/BadgesSection-BW1otPoF.js vendored
View File

@@ -1 +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};
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-DrTQks20.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};

2
dist/assets/BundleCard-BXSqQ66g.js → dist/assets/BundleCard-Dzd67GYz.js vendored
View File

@@ -1 +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};
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-DrTQks20.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};

2
dist/assets/BundleCardSection-DTCOJpL9.js → dist/assets/BundleCardSection-B6kfsBzt.js vendored
View File

@@ -1,4 +1,4 @@
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
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-DrTQks20.js";import{t as p}from"./BundleCard-Dzd67GYz.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="[

2
dist/assets/Bundles-OY5V_EmX.js → dist/assets/Bundles-ak0UwRx6.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/BundlesPreview-CXOvMVzr.js → dist/assets/BundlesPreview-CJaZ1cRJ.js vendored
View File

@@ -1 +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};
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-DrTQks20.js";import{t as o}from"./Bundles-ak0UwRx6.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};

2
dist/assets/BundlesSection-CiIjoPpi.js → dist/assets/BundlesSection-CWM5TPZh.js vendored
View File

@@ -1,4 +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"./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
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-DrTQks20.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')"

2
dist/assets/ButtonsSection-BluxlJ7h.js → dist/assets/ButtonsSection-CDz85Xj0.js vendored
View File

@@ -1,4 +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">
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-DrTQks20.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};

2
dist/assets/CardsSection-Dq0mVES3.js → dist/assets/CardsSection-B3jP_BC3.js vendored
View File

@@ -1 +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};
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-DrTQks20.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};

2
dist/assets/CartDrawer-BpxEh6WV.js → dist/assets/CartDrawer-DdrK2qot.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/CartDrawerSection-DqY3eu2o.js → dist/assets/CartDrawerSection-FN3cxCjI.js vendored
View File

@@ -1,4 +1,4 @@
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 {
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-DrTQks20.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-DdrK2qot.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,

2
dist/assets/ColorsSection-BP0stYUp.js → dist/assets/ColorsSection-DJNWS2Cc.js vendored
View File

@@ -1 +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};
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-DrTQks20.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};

1
dist/assets/DesignLayout-1JdTWTDb.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/DesignLayout-COkSWjiJ.css vendored Normal file
View File

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

1
dist/assets/DesignLayout-D0ztkT4H.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/assets/DesignLayout-LO9GkkNc.css vendored
View File

@@ -1 +0,0 @@
.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}

2
dist/assets/HeroPreview-i8Zye7Z-.js → dist/assets/HeroPreview-l39zE292.js vendored
View File

@@ -1 +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};
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-DrTQks20.js";import{t as p}from"./Navbar-4wxX8pF4.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};

2
dist/assets/HeroSection-5BNrDG7K.js → dist/assets/HeroSection-CZ9hXL8-.js vendored
View File

@@ -1,4 +1,4 @@
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
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-DrTQks20.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"

1
dist/assets/HomePage-0lVLpvRJ.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/assets/HomePage-DJszYUUP.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/IconsSection-Blraf0uZ.js → dist/assets/IconsSection-BraR1lVN.js vendored
View File

@@ -1,2 +1,2 @@
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" />
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-DrTQks20.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};

2
dist/assets/InputsSection-CCN6_kH4.js → dist/assets/InputsSection-D5WV6PeA.js vendored
View File

@@ -1 +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};
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-DrTQks20.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};

2
dist/assets/LanguageSwitcher-B_-EYSnY.js → dist/assets/LanguageSwitcher-sWIzrbUO.js vendored
View File

@@ -1 +1 @@
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};
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-DrTQks20.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};

2
dist/assets/LanguageSwitcherSection-CpsCrqF9.js → dist/assets/LanguageSwitcherSection-BsP0Gce_.js vendored
View File

@@ -1,3 +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 />
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-DrTQks20.js";import{t as c}from"./LanguageSwitcher-sWIzrbUO.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};

2
dist/assets/LogoSection-Ck9P81sR.js → dist/assets/LogoSection-DN_TRbOB.js vendored
View File

@@ -1 +1 @@
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};
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-DrTQks20.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};

1
dist/assets/MotionSection--AJtTiAH.css vendored Normal file
View File

@@ -0,0 +1 @@
@keyframes ds-ease-demo-fa318f09{0%{transform:translate(0)}to{transform:translate(calc(100% + .25rem))}}.ds-orbit-demo[data-v-fa318f09]{justify-content:center;align-items:center;width:96px;height:96px;display:inline-flex;position:relative}.ds-orbit-demo-ring[data-v-fa318f09]{border:1px solid color-mix(in oklab, var(--color-accent) 60%, transparent);background:color-mix(in oklab, var(--color-accent) 6%, transparent);animation:var(--animate-orbit);border-radius:9999px;position:absolute;inset:0}.ds-orbit-demo-dot[data-v-fa318f09]{background:var(--color-accent);width:6px;height:6px;box-shadow:0 0 8px color-mix(in oklab, var(--color-accent) 55%, transparent);border-radius:9999px;margin-left:-3px;position:absolute;top:-3px;left:50%}

1
dist/assets/MotionSection-D0yPZ23l.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/assets/Navbar-CeWNSArx.js → dist/assets/Navbar-4wxX8pF4.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/NavbarPreview-CmqY2fO6.js → dist/assets/NavbarPreview-CPxEISvC.js vendored
View File

@@ -1 +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};
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-4wxX8pF4.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};

2
dist/assets/NavbarSection-S8lg6jJX.js → dist/assets/NavbarSection-C-ooNWEr.js vendored
View File

@@ -1,4 +1,4 @@
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
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-DrTQks20.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' }]"

2
dist/assets/ProductsSection-mQIT4pOM.js → dist/assets/ProductsSection-C3p5MfGz.js vendored
View File

@@ -1,4 +1,4 @@
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
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-DrTQks20.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"

2
dist/assets/QuantityStepperSection-prENfe6m.js → dist/assets/QuantityStepperSection-DVXtlb4f.js vendored
View File

@@ -1,4 +1,4 @@
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
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-DrTQks20.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"

2
dist/assets/RadiiSection-CDVxX_nF.js → dist/assets/RadiiSection-CpZj5x2W.js vendored
View File

@@ -1 +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};
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-DrTQks20.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};

1
dist/assets/Revitalization-BZF_I3rE.js vendored
View File

@@ -1 +0,0 @@
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};

1
dist/assets/Revitalization-Dbf9J8TA.js vendored Normal file
View File

@@ -0,0 +1 @@
import{C as e,T as t,c as n,ct as r,j as i,l 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"./_plugin-vue_export-helper-BOai-rQB.js";import{t as p}from"./Badge-DcvgVKep.js";import{t as m}from"./Button-DkdaDkuf.js";var h={id:`revitalize`,class:`bg-brand text-cream`},g={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`},_={class:`flex flex-col items-center text-center gap-6 max-w-3xl mx-auto`},v={key:1,class:`font-display font-normal leading-[1.04] tracking-tight`,style:{"font-size":`clamp(2.25rem, 5vw, 3.75rem)`}},y={key:0,class:`italic font-light text-accent-soft`},b={key:2,class:`text-lg leading-relaxed text-cream/80 max-w-2xl`},x={key:0,class:`mt-10 md:mt-14 grid gap-6 sm:grid-cols-3 sm:gap-8 max-w-4xl mx-auto`},S={"aria-hidden":`true`,class:`rv-orbit`},C={key:0,class:`rv-orbit-center`},w={class:`font-sans text-base font-semibold text-cream leading-snug`},T={key:1,class:`mt-10 md:mt-14 flex justify-center`},E=f({__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`||e&&typeof e==`object`&&typeof e.title==`string`)},notifyCta:{type:String,default:``}},emits:[`notify`],setup(f){return(E,D)=>(e(),d(`section`,h,[u(`div`,g,[u(`div`,_,[f.eyebrow?(e(),n(p,{key:0,variant:`accent`},{default:i(()=>[c(o(f.eyebrow),1)]),_:1})):a(``,!0),f.headline||f.headlineEm?(e(),d(`h2`,v,[c(o(f.headline)+` `,1),f.headlineEm?(e(),d(`em`,y,o(f.headlineEm),1)):a(``,!0)])):a(``,!0),f.sub?(e(),d(`p`,b,o(f.sub),1)):a(``,!0)]),f.features.length?(e(),d(`ul`,x,[(e(!0),d(l,null,t(f.features.slice(0,3),(t,n)=>(e(),d(`li`,{key:typeof t==`string`?t:t.title,class:`flex flex-col items-center gap-4 text-center`},[u(`span`,S,[u(`span`,{class:`rv-orbit-ring`,style:r({animationDelay:`${n*-5}s`})},[...D[1]||=[u(`span`,{class:`rv-orbit-dot`},null,-1)]],4),typeof t==`object`&&t.icon?(e(),d(`span`,C,o(t.icon),1)):a(``,!0)]),u(`span`,w,o(typeof t==`string`?t:t.title),1)]))),128))])):a(``,!0),f.notifyCta?(e(),d(`div`,T,[s(m,{variant:`accent`,size:`lg`,onClick:D[0]||=e=>E.$emit(`notify`)},{default:i(()=>[c(o(f.notifyCta),1)]),_:1})])):a(``,!0)])]))}},[[`__scopeId`,`data-v-ec4233b0`]]);export{E as t};

1
dist/assets/Revitalization-DnKrmED6.css vendored Normal file
View File

@@ -0,0 +1 @@
.rv-orbit[data-v-ec4233b0]{justify-content:center;align-items:center;width:72px;height:72px;display:inline-flex;position:relative}.rv-orbit-ring[data-v-ec4233b0]{border:1px solid color-mix(in oklab, var(--color-accent) 60%, transparent);background:color-mix(in oklab, var(--color-accent) 6%, transparent);animation:var(--animate-orbit);border-radius:9999px;position:absolute;inset:0}.rv-orbit-dot[data-v-ec4233b0]{background:var(--color-accent);width:6px;height:6px;box-shadow:0 0 8px color-mix(in oklab, var(--color-accent) 55%, transparent);border-radius:9999px;margin-left:-3px;position:absolute;top:-3px;left:50%}.rv-orbit-center[data-v-ec4233b0]{filter:drop-shadow(0 1px 2px #00000040);font-size:22px;line-height:1}

2
dist/assets/RevitalizationPreview-D1Px3-RH.js → dist/assets/RevitalizationPreview-BeShlBHV.js vendored
View File

@@ -1 +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};
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-DrTQks20.js";import{t as o}from"./Revitalization-Dbf9J8TA.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};

2
dist/assets/RevitalizationSection-nci7nuoK.js → dist/assets/RevitalizationSection-CJV8ik73.js vendored
View File

@@ -1,4 +1,4 @@
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
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-DrTQks20.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')"

2
dist/assets/Search-CDT4B7PX.js → dist/assets/Search-5Gw6O_vh.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/SearchSection-C1XxujmP.js → dist/assets/SearchSection-B5d9tOs-.js vendored
View File

@@ -1,4 +1,4 @@
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{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-DrTQks20.js";import{t as m}from"./Search-5Gw6O_vh.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)

2
dist/assets/ShadowsSection-DNiuNlpr.js → dist/assets/ShadowsSection-Dmcp6Mqs.js vendored
View File

@@ -1 +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};
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-DrTQks20.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};

2
dist/assets/TypographySection-DefQ8ipJ.js → dist/assets/TypographySection-C6pReRyX.js vendored
View File

@@ -1 +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};
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-DrTQks20.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};

1
dist/assets/i18n-C5xQ6LQM.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/i18n-DrTQks20.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-C8HKZcXS.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
dist/assets/index-C3WabVD6.js → dist/assets/index-CClpXQy1.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/index-DKaNbKIi.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@@ -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-C3WabVD6.js"></script>
<script type="module" crossorigin src="/assets/index-CClpXQy1.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-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-DKaNbKIi.css">
<link rel="stylesheet" crossorigin href="/assets/index-C8HKZcXS.css">
</head>
<body>
<div id="app"></div>

1
src/assets/styles.css
View File

@@ -1,5 +1,6 @@
@import 'tailwindcss';
@import '../design-system/tokens.css';
@import '../design-system/motion.css';
html {
scroll-behavior: smooth;

75
src/design-system/components/Revitalization.vue
View File

@@ -18,12 +18,18 @@ defineProps({
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.
// Three feature pillars: `{ title, icon }`. Plain strings are still
// accepted for back-compat and render without an orbit icon. Extra
// entries are sliced off to keep the "max three things" invariant.
features: {
type: Array,
default: () => [],
validator: (arr) => arr.every((v) => typeof v === 'string'),
validator: (arr) =>
arr.every(
(v) =>
typeof v === 'string' ||
(v && typeof v === 'object' && typeof v.title === 'string'),
),
},
notifyCta: { type: String, default: '' },
@@ -61,16 +67,23 @@ defineEmits(['notify'])
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"
v-for="(feature, i) in features.slice(0, 3)"
:key="typeof feature === 'string' ? feature : feature.title"
class="flex flex-col items-center gap-4 text-center"
>
<span
aria-hidden="true"
class="inline-block h-2 w-2 rounded-full bg-accent"
/>
<span aria-hidden="true" class="rv-orbit">
<span
class="rv-orbit-ring"
:style="{ animationDelay: `${i * -5}s` }"
>
<span class="rv-orbit-dot" />
</span>
<span v-if="typeof feature === 'object' && feature.icon" class="rv-orbit-center">
{{ feature.icon }}
</span>
</span>
<span class="font-sans text-base font-semibold text-cream leading-snug">
{{ feature }}
{{ typeof feature === 'string' ? feature : feature.title }}
</span>
</li>
</ul>
@@ -83,3 +96,43 @@ defineEmits(['notify'])
</div>
</section>
</template>
<style scoped>
/* Mini orbit — port of the original Kaiser-Natron revitalisation
visual, scaled down so each pillar gets its own. A ring spins
around a centered emoji; a small dot rides the ring. */
.rv-orbit {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
}
.rv-orbit-ring {
position: absolute;
inset: 0;
border-radius: 9999px;
border: 1px solid color-mix(in oklab, var(--color-accent) 60%, transparent);
background: color-mix(in oklab, var(--color-accent) 6%, transparent);
animation: var(--animate-orbit);
}
.rv-orbit-dot {
position: absolute;
top: -3px;
left: 50%;
width: 6px;
height: 6px;
margin-left: -3px;
border-radius: 9999px;
background: var(--color-accent);
box-shadow: 0 0 8px color-mix(in oklab, var(--color-accent) 55%, transparent);
}
.rv-orbit-center {
font-size: 22px;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
/* The `spin` keyframe and reduced-motion guard are shared in
`src/design-system/motion.css`. */
</style>

79
src/design-system/motion.css Normal file
View File

@@ -0,0 +1,79 @@
/*
* Motion system — keyframes, utilities, reduced-motion guard.
*
* Philosophy
* ──────────
* 1. Motion is chrome, not content. If a user can't see the animation,
* the page still has to make sense. Never gate meaning on motion.
* 2. One role per duration. Tokens in `tokens.css` already encode this:
* --duration-fast (120ms) — hover / press feedback
* --duration-base (200ms) — small UI transitions (color, opacity)
* --duration-slow (320ms) — arrivals, reveals, drawer open
* --duration-scene (480ms) — section-level entrances
* --duration-orbit (16s) — ambient loops (orbit, slow pulses)
* Pick the token that matches the role, never a bespoke number.
* 3. Easing has intent. `--ease-out` is the house default — motion
* should arrive, not depart. `--ease-in-out` is reserved for things
* that have to come AND go (drawers, overlays). `--ease-linear`
* only for continuous loops where any curve would pulse visibly.
* 4. Ambient motion must be low-energy. Orbits, pulses, and other
* always-on animation should sit under the threshold of noticing
* — enough to feel alive on second glance, never enough to compete
* with content for attention.
* 5. Reduced motion is not a fallback, it's a contract. Every looping
* or scenic animation must be neutralised by the media query below.
* Micro UI transitions (hover, focus) can keep running; they're
* short enough to be invisible at the vestibular level.
* 6. Keyframes live here, not in components. Components consume
* `var(--animate-*)` tokens or the utility classes below. A new
* animation always ships as a token + a keyframe in this file.
*
* Naming
* ──────
* Keyframes: kebab-case verbs describing the transform
* (`fade-in-up`, `pulse-soft`, `spin`).
* Utilities: `.motion-<name>` so they're easy to grep and never
* collide with Tailwind's `animate-*` namespace.
*/
/* ——— Keyframes ———————————————————————————————————————————— */
/* `spin` is provided by Tailwind v4's defaults; redeclared here so
--animate-orbit works even if we ever drop that default. */
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translate3d(0, 8px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes pulse-soft {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
/* ——— Utilities ———————————————————————————————————————————— */
.motion-orbit { animation: var(--animate-orbit); }
.motion-fade-in { animation: var(--animate-fade-in-up); }
.motion-pulse { animation: var(--animate-pulse-soft); }
/* ——— Reduced-motion contract ————————————————————————————— */
/* Kills looping / scenic motion. Short UI transitions (hover,
focus, press) stay — they're under the vestibular threshold. */
@media (prefers-reduced-motion: reduce) {
.motion-orbit,
.motion-fade-in,
.motion-pulse,
[class*="animate-"] {
animation: none !important;
}
}

15
src/design-system/tokens.css
View File

@@ -82,8 +82,23 @@
--shadow-lg: 0 16px 44px color-mix(in srgb, var(--color-brand) 18%, transparent);
/* ——— Motion ——————————————————————————————————————————————— */
/* Three UI durations + one scenic duration for looping atmosphere
(orbit, slow pulses). Easings: --ease-out is the house default for
arrivals; --ease-in-out only when the element has to come and go. */
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--duration-scene: 480ms;
--duration-orbit: 16s;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-linear: linear;
/* Named animations. Tailwind v4 exposes these as `animate-*`
utilities; raw CSS can call them via `animation: var(--animate-*)`.
Keyframes live in `motion.css` (outside @theme). */
--animate-orbit: spin var(--duration-orbit) linear infinite;
--animate-fade-in-up: fade-in-up var(--duration-slow) var(--ease-out) both;
--animate-pulse-soft: pulse-soft 2.8s var(--ease-in-out) infinite;
}

56
src/i18n/messages.js
View File

@@ -49,6 +49,7 @@ const de = {
'ds.nav.typography': 'Typografie',
'ds.nav.radii': 'Radien',
'ds.nav.shadows': 'Schatten',
'ds.nav.motion': 'Motion',
'ds.nav.icons': 'Icons',
'ds.nav.buttons': 'Buttons',
'ds.nav.badges': 'Badges',
@@ -141,6 +142,33 @@ const de = {
'ds.shadows.md.note': 'Mittel — Hover des primären Buttons',
'ds.shadows.lg.note': 'Groß — schwebende Karten, Overlays',
// Motion
'ds.motion.title': 'Motion',
'ds.motion.description': 'Bewegung dient dem Verständnis, nicht der Dekoration. Drei UI-Dauern plus eine szenische Schleife, eine Standard-Kurve, und klare Regeln für Nutzer mit reduzierter Bewegung.',
'ds.motion.philosophy.title': 'Philosophie',
'ds.motion.principle.purpose': 'Nur animieren, wenn Hierarchie, Zustand oder Kontinuität erklärt werden. Dekorative Bewegung wird weggelassen.',
'ds.motion.principle.cadence': 'Drei Dauern, eine Kurve: 120ms für Zustand, 200ms für UI-Übergänge, 320ms für größere Reveals. --ease-out als Standard — Ankünfte wirken gesetzt, nicht schnippisch.',
'ds.motion.principle.scenic': 'Szenische Schleifen (Orbit, weiche Pulse) laufen linear über 10–20 s. Lang genug, um als Atmosphäre zu lesen, nie als tickende Uhr.',
'ds.motion.principle.reduced': 'prefers-reduced-motion wird immer respektiert. Schleifen einfrieren, Übergänge zusammenfallen lassen — wer Bewegung ablehnt, wird dafür nicht bestraft.',
'ds.motion.durations.title': 'Dauern',
'ds.motion.duration.fast.note': 'Zustand — Hover, Focus, Press.',
'ds.motion.duration.base.note': 'Standard-UI — Farbwechsel, Öffnen/Schließen.',
'ds.motion.duration.slow.note': 'Größere Reveals — Drawer, Overlays, Karten.',
'ds.motion.duration.scene.note': 'Szenische Wechsel — ganze Sektion, Route-Wechsel.',
'ds.motion.duration.orbit.note': 'Umgebungsschleifen — Orbit-Ringe, weiche Pulse.',
'ds.motion.easings.title': 'Kurven',
'ds.motion.ease.out.note': 'Standard. Ankünfte landen weich.',
'ds.motion.ease.inOut.note': 'Nur wenn ein Element kommen und wieder gehen muss.',
'ds.motion.ease.linear.note': 'Für mechanische Schleifen — Orbit, Spinner.',
'ds.motion.animations.title': 'Benannte Animationen',
'ds.motion.animate.orbit.note': 'Ring rotiert um ein zentriertes Icon. Verwendet im Revitalization-Abschnitt.',
'ds.motion.animate.fadeInUp.note': 'Einblenden mit 8 px Versatz — für Eintrittsmomente.',
'ds.motion.animate.pulseSoft.note': 'Ruhiger Opazitäts-Puls — für Live-Indikatoren.',
'ds.motion.reduced.title': 'Reduzierte Bewegung',
'ds.motion.reduced.body': 'Globale Regel in motion.css: bei prefers-reduced-motion: reduce kollabieren alle Animations- und Transition-Dauern auf ~0 ms. Komponenten brauchen keine eigenen Weichen dafür.',
'ds.motion.replay': 'Neu abspielen',
'ds.motion.fadePreview': 'Einblenden',
// Icons
'ds.icons.title': 'Icons',
'ds.icons.description': 'Ein kuratiertes strich-basiertes Icon-Set im 24x24-Raster. Wird über die Icon-Komponente gerendert — erbt die Farbe von currentColor.',
@@ -407,6 +435,7 @@ const en = {
'ds.nav.typography': 'Typography',
'ds.nav.radii': 'Radii',
'ds.nav.shadows': 'Shadows',
'ds.nav.motion': 'Motion',
'ds.nav.icons': 'Icons',
'ds.nav.buttons': 'Buttons',
'ds.nav.badges': 'Badges',
@@ -491,6 +520,33 @@ const en = {
'ds.shadows.md.note': 'Medium — primary button hover',
'ds.shadows.lg.note': 'Large — floating cards, overlays',
// Motion
'ds.motion.title': 'Motion',
'ds.motion.description': 'Motion serves comprehension, not decoration. Three UI durations plus one scenic loop, one default curve, and a clear rule for reduced-motion users.',
'ds.motion.philosophy.title': 'Philosophy',
'ds.motion.principle.purpose': 'Only animate when it teaches hierarchy, state, or continuity. Decorative motion gets cut.',
'ds.motion.principle.cadence': 'Three durations, one curve: 120ms for state, 200ms for UI transitions, 320ms for larger reveals. --ease-out is the default — arrivals feel settled, not snappy.',
'ds.motion.principle.scenic': 'Scenic loops (orbit, soft pulses) run linear over 10–20s. Long enough to read as atmosphere, never as a ticking clock.',
'ds.motion.principle.reduced': 'prefers-reduced-motion is always honoured. Freeze loops, collapse transitions — never punish a user for opting out.',
'ds.motion.durations.title': 'Durations',
'ds.motion.duration.fast.note': 'State — hover, focus, press.',
'ds.motion.duration.base.note': 'Standard UI — colour change, open/close.',
'ds.motion.duration.slow.note': 'Larger reveals — drawer, overlays, cards.',
'ds.motion.duration.scene.note': 'Scenic changes — full section, route transitions.',
'ds.motion.duration.orbit.note': 'Ambient loops — orbit rings, soft pulses.',
'ds.motion.easings.title': 'Easings',
'ds.motion.ease.out.note': 'Default. Arrivals land softly.',
'ds.motion.ease.inOut.note': 'Only when an element must come and go.',
'ds.motion.ease.linear.note': 'For mechanical loops — orbit, spinners.',
'ds.motion.animations.title': 'Named animations',
'ds.motion.animate.orbit.note': 'Ring rotates around a centered icon. Used in the Revitalization section.',
'ds.motion.animate.fadeInUp.note': 'Fade with an 8px rise — for entrance moments.',
'ds.motion.animate.pulseSoft.note': 'Quiet opacity pulse — for live indicators.',
'ds.motion.reduced.title': 'Reduced motion',
'ds.motion.reduced.body': 'Global rule in motion.css: under prefers-reduced-motion: reduce, all animation and transition durations collapse to ~0ms. Components do not need their own switch.',
'ds.motion.replay': 'Replay',
'ds.motion.fadePreview': 'Fade in',
'ds.icons.title': 'Icons',
'ds.icons.description': 'A curated stroke-based icon set on a 24x24 grid. Rendered via the Icon component — inherits color from currentColor.',
'ds.icons.search': 'Search icons…',

6
src/pages/HomePage.vue
View File

@@ -61,9 +61,9 @@ const revitCopy = computed(() => ({
sub: t('revit.sub'),
notifyCta: t('revit.notifyCta'),
features: [
t('revit.feature.1.title'),
t('revit.feature.2.title'),
t('revit.feature.3.title'),
{ title: t('revit.feature.1.title'), icon: '⚗️' },
{ title: t('revit.feature.2.title'), icon: '💊' },
{ title: t('revit.feature.3.title'), icon: '🌿' },
],
}))

1
src/pages/design/DesignLayout.vue
View File

@@ -24,6 +24,7 @@ const groups = computed(() => [
{ name: 'ds-typography', label: t('ds.nav.typography') },
{ name: 'ds-radii', label: t('ds.nav.radii') },
{ name: 'ds-shadows', label: t('ds.nav.shadows') },
{ name: 'ds-motion', label: t('ds.nav.motion') },
],
},
{

235
src/pages/design/MotionSection.vue Normal file
View File

@@ -0,0 +1,235 @@
<script setup>
import { ref } from 'vue'
import SectionShell from './SectionShell.vue'
import { useI18n } from '@/i18n/index.js'
const { t } = useI18n()
const principles = [
t('ds.motion.principle.purpose'),
t('ds.motion.principle.cadence'),
t('ds.motion.principle.scenic'),
t('ds.motion.principle.reduced'),
]
const durations = [
{ name: 'fast', value: '120ms', note: t('ds.motion.duration.fast.note') },
{ name: 'base', value: '200ms', note: t('ds.motion.duration.base.note') },
{ name: 'slow', value: '320ms', note: t('ds.motion.duration.slow.note') },
{ name: 'scene', value: '480ms', note: t('ds.motion.duration.scene.note') },
{ name: 'orbit', value: '16s', note: t('ds.motion.duration.orbit.note') },
]
const easings = [
{ name: 'out', curve: 'cubic-bezier(0.16, 1, 0.3, 1)', note: t('ds.motion.ease.out.note') },
{ name: 'in-out', curve: 'cubic-bezier(0.65, 0, 0.35, 1)', note: t('ds.motion.ease.inOut.note') },
{ name: 'linear', curve: 'linear', note: t('ds.motion.ease.linear.note') },
]
const animations = [
{ name: 'orbit', token: '--animate-orbit', note: t('ds.motion.animate.orbit.note') },
{ name: 'fade-in-up', token: '--animate-fade-in-up', note: t('ds.motion.animate.fadeInUp.note') },
{ name: 'pulse-soft', token: '--animate-pulse-soft', note: t('ds.motion.animate.pulseSoft.note') },
]
// Easing demo — replays whenever the user clicks any easing tile so all
// three previews fire together for direct comparison.
const easeRunKey = ref(0)
function replayEasings() {
easeRunKey.value += 1
}
// Fade-in-up demo replays the same way.
const fadeKey = ref(0)
function replayFade() {
fadeKey.value += 1
}
</script>
<template>
<SectionShell
:eyebrow="t('ds.eyebrow.tokens')"
:title="t('ds.motion.title')"
:description="t('ds.motion.description')"
>
<!-- Philosophy -->
<section>
<h2 class="font-display text-2xl font-normal text-ink mb-4">
{{ t('ds.motion.philosophy.title') }}
</h2>
<ul class="space-y-3 text-[15px] text-muted leading-relaxed max-w-2xl">
<li
v-for="(p, i) in principles"
:key="i"
class="flex gap-3"
>
<span class="mt-2 inline-block h-1.5 w-1.5 rounded-full bg-brand flex-shrink-0" />
<span>{{ p }}</span>
</li>
</ul>
</section>
<!-- Durations -->
<section>
<h2 class="font-display text-2xl font-normal text-ink mb-4">
{{ t('ds.motion.durations.title') }}
</h2>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
<div
v-for="d in durations"
:key="d.name"
class="rounded-md border border-line bg-paper p-5"
>
<code class="font-mono text-[12px] text-ink block">--duration-{{ d.name }}</code>
<div class="mt-3 mb-3 text-[13px] text-muted">{{ d.value }}</div>
<p class="text-[13px] text-muted leading-relaxed">{{ d.note }}</p>
</div>
</div>
</section>
<!-- Easings -->
<section>
<header class="mb-4 flex items-end justify-between gap-4 flex-wrap">
<h2 class="font-display text-2xl font-normal text-ink">
{{ t('ds.motion.easings.title') }}
</h2>
<button
type="button"
class="text-[12px] font-semibold uppercase tracking-label text-brand hover:underline"
@click="replayEasings"
>
{{ t('ds.motion.replay') }}
</button>
</header>
<div class="grid sm:grid-cols-3 gap-5">
<div
v-for="e in easings"
:key="e.name"
class="rounded-md border border-line bg-paper p-5"
>
<code class="font-mono text-[12px] text-ink block">--ease-{{ e.name }}</code>
<div
:key="`${e.name}-${easeRunKey}`"
class="relative mt-4 h-12 rounded-sm bg-cream overflow-hidden cursor-pointer"
@click="replayEasings"
>
<span
class="absolute top-1/2 left-1 h-6 w-6 -mt-3 rounded-sm bg-brand"
:style="{
animation: `ds-ease-demo 1200ms ${e.curve} forwards`,
}"
/>
</div>
<p class="mt-3 text-[12px] text-muted leading-relaxed">{{ e.note }}</p>
</div>
</div>
</section>
<!-- Named animations -->
<section>
<h2 class="font-display text-2xl font-normal text-ink mb-4">
{{ t('ds.motion.animations.title') }}
</h2>
<div class="grid sm:grid-cols-3 gap-5">
<!-- Orbit -->
<div class="rounded-md border border-line bg-paper p-5">
<code class="font-mono text-[12px] text-ink block">--animate-orbit</code>
<div class="mt-4 flex h-32 items-center justify-center">
<span class="ds-orbit-demo">
<span class="ds-orbit-demo-ring">
<span class="ds-orbit-demo-dot" />
</span>
</span>
</div>
<p class="mt-3 text-[12px] text-muted leading-relaxed">
{{ animations[0].note }}
</p>
</div>
<!-- Fade in up -->
<div class="rounded-md border border-line bg-paper p-5">
<header class="flex items-center justify-between gap-2">
<code class="font-mono text-[12px] text-ink">--animate-fade-in-up</code>
<button
type="button"
class="text-[11px] font-semibold uppercase tracking-label text-brand hover:underline"
@click="replayFade"
>
{{ t('ds.motion.replay') }}
</button>
</header>
<div class="mt-4 flex h-32 items-center justify-center">
<span
:key="fadeKey"
class="rounded-sm bg-brand text-cream text-[12px] font-semibold tracking-label uppercase px-4 py-2"
:style="{ animation: 'var(--animate-fade-in-up)' }"
>{{ t('ds.motion.fadePreview') }}</span>
</div>
<p class="mt-3 text-[12px] text-muted leading-relaxed">
{{ animations[1].note }}
</p>
</div>
<!-- Pulse soft -->
<div class="rounded-md border border-line bg-paper p-5">
<code class="font-mono text-[12px] text-ink block">--animate-pulse-soft</code>
<div class="mt-4 flex h-32 items-center justify-center">
<span
class="inline-block h-3 w-3 rounded-full bg-accent"
:style="{ animation: 'var(--animate-pulse-soft)' }"
/>
</div>
<p class="mt-3 text-[12px] text-muted leading-relaxed">
{{ animations[2].note }}
</p>
</div>
</div>
</section>
<!-- Reduced motion -->
<section>
<h2 class="font-display text-2xl font-normal text-ink mb-4">
{{ t('ds.motion.reduced.title') }}
</h2>
<p class="text-[15px] text-muted leading-relaxed max-w-2xl">
{{ t('ds.motion.reduced.body') }}
</p>
</section>
</SectionShell>
</template>
<style scoped>
@keyframes ds-ease-demo {
from { transform: translateX(0); }
to { transform: translateX(calc(100% + 0.25rem)); }
}
/* Orbit demo — same primitives the live Revitalization uses. */
.ds-orbit-demo {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
}
.ds-orbit-demo-ring {
position: absolute;
inset: 0;
border-radius: 9999px;
border: 1px solid color-mix(in oklab, var(--color-accent) 60%, transparent);
background: color-mix(in oklab, var(--color-accent) 6%, transparent);
animation: var(--animate-orbit);
}
.ds-orbit-demo-dot {
position: absolute;
top: -3px;
left: 50%;
width: 6px;
height: 6px;
margin-left: -3px;
border-radius: 9999px;
background: var(--color-accent);
box-shadow: 0 0 8px color-mix(in oklab, var(--color-accent) 55%, transparent);
}
</style>

1
src/router/index.js
View File

@@ -48,6 +48,7 @@ const routes = [
{ path: 'typography', name: 'ds-typography', component: () => import('@/pages/design/TypographySection.vue') },
{ path: 'radii', name: 'ds-radii', component: () => import('@/pages/design/RadiiSection.vue') },
{ path: 'shadows', name: 'ds-shadows', component: () => import('@/pages/design/ShadowsSection.vue') },
{ path: 'motion', name: 'ds-motion', component: () => import('@/pages/design/MotionSection.vue') },
{ path: 'buttons', name: 'ds-buttons', component: () => import('@/pages/design/ButtonsSection.vue') },
{ path: 'badges', name: 'ds-badges', component: () => import('@/pages/design/BadgesSection.vue') },
{ path: 'inputs', name: 'ds-inputs', component: () => import('@/pages/design/InputsSection.vue') },