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

addded banner placeholder

Browse Source
This commit is contained in:
Dorian
2026-04-22 10:45:44 +01:00
parent f27624478c
commit 6b92eb5474
41 changed files with 145 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/assets/BadgesSection-CZG372xe.js → dist/assets/BadgesSection-DKxt-yNd.js vendored
View File

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

2
dist/assets/ButtonsSection-CZXkavhJ.js → dist/assets/ButtonsSection-DKw99nc6.js vendored
View File

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

2
dist/assets/CardsSection-DKnNNOFd.js → dist/assets/CardsSection-DpEvbOdv.js vendored
View File

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

2
dist/assets/CartDrawer-BmeOZCTu.js → dist/assets/CartDrawer-CbYC7UR_.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/CartDrawerSection-P_tTgwkH.js → dist/assets/CartDrawerSection-DH-fPCNA.js vendored
View File

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

2
dist/assets/ColorsSection-CgUfYHzl.js → dist/assets/ColorsSection-DVVBcMbw.js vendored
View File

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

2
dist/assets/DesignLayout-B11q4TBh.js → dist/assets/DesignLayout-B0qVdtRW.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/Hero-BlnQ4ovQ.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/assets/Hero-DIyaUqbN.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/HeroPreview-DXtAuqNJ.js vendored Normal file
View File

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

1
dist/assets/HeroPreview-YYVBCGRe.js vendored
View File

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

2
dist/assets/HeroSection-Dv_7KPjq.js → dist/assets/HeroSection-DAjSDNmS.js vendored
View File

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

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

@@ -1 +0,0 @@
import{A as e,S as t,W as n,ct as r,m as i,p as a,r as o,s,u as c,x as l,z as u}from"./runtime-core.esm-bundler-DgkFZzbt.js";import{t as d}from"./i18n-BnJyMUMH.js";import{n as f}from"./products-C8C_GS-z.js";import{a as p,i as m,o as h,r as g,t as _}from"./api-4Jnm40kQ.js";import{t as v}from"./Navbar-CWalIKJ6.js";import{t as y}from"./Hero-DIyaUqbN.js";import{t as b}from"./CartDrawer-BmeOZCTu.js";var x={class:`h-svh flex flex-col bg-brand overflow-hidden`},S={class:`flex-1 flex items-center`},C={class:`italic font-light text-accent-soft`},w=`/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview-2.png`,T=`kaiser-natron-pulver-250-g-grosspackung`,E={__name:`HomePage`,setup(E){let{t:D}=d(),O=h(),k=u(!1);async function A(){await _(T,1),k.value=!0}async function j({productId:e,quantity:t}){await p(e,t)}async function M(e){await m(e)}async function N(e){await _(e.id,1),k.value=!0}return l(()=>{g()}),(l,u)=>(t(),c(o,null,[s(`div`,x,[i(v,{variant:`brand`,layout:`standard`,"cart-count":n(O).count,products:n(f),onCart:u[0]||=e=>k.value=!0,onSearch:N},null,8,[`cart-count`,`products`]),s(`div`,S,[i(y,{class:`w-full`,variant:`split`,tone:`brand`,eyebrow:n(D)(`ds.hero.eyebrow`),subheadline:n(D)(`ds.hero.sub`),image:w,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,"cta-label":n(D)(`ds.buttons.addToCart`),"secondary-label":n(D)(`ds.buttons.learnMore`),"secondary-href":`/anwendungen`,onCta:A},{headline:e(()=>[a(r(n(D)(`ds.hero.headline.a`))+` `,1),s(`em`,C,r(n(D)(`ds.hero.headline.em`)),1),a(` `+r(n(D)(`ds.hero.headline.b`)),1)]),_:1},8,[`eyebrow`,`subheadline`,`cta-label`,`secondary-label`])])]),i(b,{modelValue:k.value,"onUpdate:modelValue":u[1]||=e=>k.value=e,items:n(O).items,subtotal:n(O).subtotal,count:n(O).count,onUpdateQuantity:j,onRemove:M,onCheckout:u[2]||=e=>k.value=!1},null,8,[`modelValue`,`items`,`subtotal`,`count`])],64))}};export{E as default};

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

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

2
dist/assets/IconsSection-LnzvYxy9.js → dist/assets/IconsSection-CS4v5siL.js vendored
View File

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

2
dist/assets/InputsSection-CJduf6w_.js → dist/assets/InputsSection-Be5hSyLd.js vendored
View File

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

2
dist/assets/LanguageSwitcher-CByWn8qF.js → dist/assets/LanguageSwitcher-CtoC4wR8.js vendored
View File

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

2
dist/assets/LanguageSwitcherSection-D3fEdcHZ.js → dist/assets/LanguageSwitcherSection-CJlfx8nC.js vendored
View File

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

2
dist/assets/LogoSection-DXFxtzvZ.js → dist/assets/LogoSection-Cw1YDT0u.js vendored
View File

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

2
dist/assets/Navbar-CWalIKJ6.js → dist/assets/Navbar-DKyzh9Gc.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/NavbarPreview-BufPdu8L.js → dist/assets/NavbarPreview-Ddpg_MKN.js vendored
View File

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

2
dist/assets/NavbarSection-t1sJtcHE.js → dist/assets/NavbarSection-APxiDb5S.js vendored
View File

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

2
dist/assets/ProductsSection-CilUgwmM.js → dist/assets/ProductsSection-DsaABBea.js vendored
View File

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

2
dist/assets/QuantityStepperSection-Cymv5sps.js → dist/assets/QuantityStepperSection-C91b4kgk.js vendored
View File

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

2
dist/assets/RadiiSection-DCbIOBSf.js → dist/assets/RadiiSection-BcKjDr-c.js vendored
View File

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

2
dist/assets/Search-FR7LbWnB.js → dist/assets/Search-DA7amK-p.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/SearchSection-BGqNQGLv.js → dist/assets/SearchSection-BpLwcWE_.js vendored
View File

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

2
dist/assets/ShadowsSection-DOvFhLxd.js → dist/assets/ShadowsSection-D7fyNVcf.js vendored
View File

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

2
dist/assets/TypographySection-R_RgbXWF.js → dist/assets/TypographySection-DjsFMcb-.js vendored
View File

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

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

4
dist/assets/index-CKKwJwi6.js → dist/assets/index-Bs7tH0wK.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/assets/index-qVcUsgnQ.css → dist/assets/index-RhrqUSdw.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" 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" rel="stylesheet"
/> />
<script type="module" crossorigin src="/assets/index-CKKwJwi6.js"></script> <script type="module" crossorigin src="/assets/index-Bs7tH0wK.js"></script>
<link rel="modulepreload" crossorigin href="/assets/_plugin-vue_export-helper-BOai-rQB.js"> <link rel="modulepreload" crossorigin href="/assets/_plugin-vue_export-helper-BOai-rQB.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-DgkFZzbt.js"> <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-DgkFZzbt.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-ouKdkQwB.js"> <link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-ouKdkQwB.js">
<link rel="modulepreload" crossorigin href="/assets/pinia-BLnSyg0Y.js"> <link rel="modulepreload" crossorigin href="/assets/pinia-BLnSyg0Y.js">
<link rel="modulepreload" crossorigin href="/assets/vue-router-BUTR8NmK.js"> <link rel="modulepreload" crossorigin href="/assets/vue-router-BUTR8NmK.js">
<link rel="stylesheet" crossorigin href="/assets/index-qVcUsgnQ.css"> <link rel="stylesheet" crossorigin href="/assets/index-RhrqUSdw.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
dist/products/cutouts/kaiser-natron-pulver-250-g-großpackung-removebg-preview (1).png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
public/products/cutouts/kaiser-natron-pulver-250-g-großpackung-removebg-preview (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

6
src/assets/styles.css
View File

@@ -7,7 +7,11 @@ html {
} }
body { body {
background: var(--color-surface); /* Match the last visible section on the home page (cream) so browser
overscroll + any empty space below content blends with the banner
instead of showing a seam. Design-system pages override with
`bg-surface` on their own root wrapper, so they're unaffected. */
background: var(--color-cream);
color: var(--color-ink); color: var(--color-ink);
font-family: var(--font-sans); font-family: var(--font-sans);
line-height: 1.55; line-height: 1.55;

16
src/design-system/components/Hero.vue
View File

@@ -30,6 +30,10 @@ const props = defineProps({
default: 'cream', default: 'cream',
validator: (t) => ['cream', 'paper', 'brand'].includes(t), validator: (t) => ['cream', 'paper', 'brand'].includes(t),
}, },
/** Only affects the split variant. When true, the image sits on the left
* and copy on the right from `lg` up. Mobile order is unchanged (image
* on top, copy below) to preserve reading order. */
reverse: { type: Boolean, default: false },
}) })
defineEmits(['cta', 'secondary']) defineEmits(['cta', 'secondary'])
@@ -76,11 +80,17 @@ const layout = computed(() => {
// `order-*` flips the stacking order below lg without changing DOM order. // `order-*` flips the stacking order below lg without changing DOM order.
// On lg, let the grid stretch items to the row height and then `justify-center` // On lg, let the grid stretch items to the row height and then `justify-center`
// the copy column so its headline/CTA block sits at the image's vertical midpoint. // the copy column so its headline/CTA block sits at the image's vertical midpoint.
// `reverse` swaps the desktop columns so the image sits on the left.
return { return {
root: 'grid gap-10 md:gap-14 lg:grid-cols-[1.05fr_1fr]', root: props.reverse
copy: 'order-2 lg:order-1 max-w-xl mx-auto lg:mx-0 items-center text-center lg:items-start lg:text-left lg:justify-center', ? 'grid gap-10 md:gap-14 lg:grid-cols-[1fr_1.05fr]'
: 'grid gap-10 md:gap-14 lg:grid-cols-[1.05fr_1fr]',
copy: [
'order-2 max-w-xl mx-auto lg:mx-0 items-center text-center lg:justify-center',
props.reverse ? 'lg:order-2 lg:items-start lg:text-left' : 'lg:order-1 lg:items-start lg:text-left',
].join(' '),
actions: 'justify-center lg:justify-start', actions: 'justify-center lg:justify-start',
media: 'order-1 lg:order-2', media: props.reverse ? 'order-1 lg:order-1' : 'order-1 lg:order-2',
mediaSize: 'w-[221px] sm:w-[289px] md:w-[357px] lg:w-full lg:max-w-[442px]', mediaSize: 'w-[221px] sm:w-[289px] md:w-[357px] lg:w-full lg:max-w-[442px]',
} }
}) })

14
src/i18n/messages.js
View File

@@ -230,6 +230,13 @@ const de = {
'ds.hero.headline.b': 'was glänzen soll.', 'ds.hero.headline.b': 'was glänzen soll.',
'ds.hero.sub': 'Reinigt, backt und neutralisiert Gerüche. Die 250-g-Großpackung für den Haushalt, der sich auf das Original verlässt.', 'ds.hero.sub': 'Reinigt, backt und neutralisiert Gerüche. Die 250-g-Großpackung für den Haushalt, der sich auf das Original verlässt.',
// Home page – second-fold banner
'home.banner.eyebrow': 'Vielseitig einsetzbar',
'home.banner.headline.a': 'Ein Pulver,',
'home.banner.headline.em': 'hundert Anwendungen',
'home.banner.headline.b': 'im Haushalt.',
'home.banner.sub': 'Vom Kuchen über das Bad bis zur Wäsche – Kaiser-Natron leistet überall still und zuverlässig seine Arbeit.',
// Search section // Search section
'ds.search.title': 'Produktsuche', 'ds.search.title': 'Produktsuche',
'ds.search.description': 'Suchknopf rechts in der Navbar (links der Sprachwahl) und links unten als Floating-Button auf dem Telefon. Klick öffnet ein Full-Screen-Overlay auf Mobilgeräten bzw. ein zentriertes Panel auf dem Desktop. Eingabefeld ist autofokussiert, Ergebnisliste aktualisiert sich beim Tippen, Pfeiltasten / Enter / Esc werden unterstützt.', 'ds.search.description': 'Suchknopf rechts in der Navbar (links der Sprachwahl) und links unten als Floating-Button auf dem Telefon. Klick öffnet ein Full-Screen-Overlay auf Mobilgeräten bzw. ein zentriertes Panel auf dem Desktop. Eingabefeld ist autofokussiert, Ergebnisliste aktualisiert sich beim Tippen, Pfeiltasten / Enter / Esc werden unterstützt.',
@@ -507,6 +514,13 @@ const en = {
'ds.hero.headline.b': 'that should shine.', 'ds.hero.headline.b': 'that should shine.',
'ds.hero.sub': 'Cleans, bakes, and neutralises odours. The 250 g large pack for the household that trusts the original.', 'ds.hero.sub': 'Cleans, bakes, and neutralises odours. The 250 g large pack for the household that trusts the original.',
// Home page – second-fold banner
'home.banner.eyebrow': 'Truly versatile',
'home.banner.headline.a': 'One powder,',
'home.banner.headline.em': 'a hundred uses',
'home.banner.headline.b': 'around the home.',
'home.banner.sub': 'From baking to bathing to laundry — Kaiser Natron quietly does its work wherever you need it.',
'ds.search.title': 'Product search', 'ds.search.title': 'Product search',
'ds.search.description': 'Search trigger on the right of the navbar (left of the language switcher) and bottom-left as a floating button on mobile. Tapping it opens a full-screen overlay on mobile and a centered panel on desktop. The input auto-focuses, the results list updates as you type, and arrow keys / Enter / Esc are supported.', 'ds.search.description': 'Search trigger on the right of the navbar (left of the language switcher) and bottom-left as a floating button on mobile. Tapping it opens a full-screen overlay on mobile and a centered panel on desktop. The input auto-focuses, the results list updates as you type, and arrow keys / Enter / Esc are supported.',
'ds.search.demo.label': 'Open demo', 'ds.search.demo.label': 'Open demo',

59
src/pages/HomePage.vue
View File

@@ -22,11 +22,21 @@ const imgPulver250 =
const heroProductId = 'kaiser-natron-pulver-250-g-grosspackung' const heroProductId = 'kaiser-natron-pulver-250-g-grosspackung'
// Second-fold banner — cream tone, image-left split, alternate cutout.
const imgBanner =
'/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview%20%281%29.png'
const bannerProductId = 'kaiser-natron-pulver-250-g-grosspackung'
async function onHeroAdd() { async function onHeroAdd() {
await addToCart(heroProductId, 1) await addToCart(heroProductId, 1)
cartOpen.value = true cartOpen.value = true
} }
async function onBannerAdd() {
await addToCart(bannerProductId, 1)
cartOpen.value = true
}
async function onQty({ productId, quantity }) { async function onQty({ productId, quantity }) {
await updateCartItem(productId, quantity) await updateCartItem(productId, quantity)
} }
@@ -84,8 +94,57 @@ onMounted(() => {
</template> </template>
</Hero> </Hero>
</div> </div>
<!-- Wave divider from brand-green → cream. Fill uses the next
section's background so the curve reads as the bottom edge of
the green fold. `preserveAspectRatio="none"` lets the SVG
stretch across any viewport width while keeping a consistent
vertical amplitude. -->
<svg
aria-hidden="true"
class="block w-full h-12 md:h-16 shrink-0"
viewBox="0 0 1440 64"
preserveAspectRatio="none"
>
<path
d="M0,40 C320,4 520,60 720,32 C920,4 1120,60 1440,24 L1440,64 L0,64 Z"
fill="var(--color-cream)"
/>
</svg>
</div> </div>
<!-- Second-fold product banner — same Hero component, cream surface,
split layout reversed so the product sits on the left. -->
<Hero
variant="split"
tone="cream"
reverse
:eyebrow="t('home.banner.eyebrow')"
:subheadline="t('home.banner.sub')"
:image="imgBanner"
image-alt="Kaiser-Natron Pulver 250 g Großpackung"
:cta-label="t('ds.buttons.addToCart')"
:secondary-label="t('ds.buttons.learnMore')"
secondary-href="/anwendungen"
@cta="onBannerAdd"
>
<template #headline>
{{ t('home.banner.headline.a') }}
<em class="italic font-light text-brand-soft">{{ t('home.banner.headline.em') }}</em>
{{ t('home.banner.headline.b') }}
</template>
</Hero>
<!-- Bottom clearance for the mobile floating cluster (search / cart / menu).
Cluster sits at bottom-5 (20px) + safe-area, is 56px tall, and needs a
24px breathing gap above it: 20 + 56 + 24 = 100px, plus the device's
safe-area inset. Desktop hides the cluster, so no spacer there. -->
<div
aria-hidden="true"
class="md:hidden"
style="height: calc(100px + env(safe-area-inset-bottom));"
/>
<CartDrawer <CartDrawer
v-model="cartOpen" v-model="cartOpen"
:items="cart.items" :items="cart.items"

24
src/pages/design/previews/HeroPreview.vue
View File

@@ -14,10 +14,16 @@ const variant = computed(() =>
const tone = computed(() => const tone = computed(() =>
['cream', 'paper', 'brand'].includes(route.query.tone) ? route.query.tone : 'cream', ['cream', 'paper', 'brand'].includes(route.query.tone) ? route.query.tone : 'cream',
) )
const reverse = computed(() => route.query.reverse === '1')
const navVariant = computed(() => (tone.value === 'brand' ? 'brand' : tone.value)) const navVariant = computed(() => (tone.value === 'brand' ? 'brand' : tone.value))
const imgPulver250 = const imgPulver250 =
'/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview-2.png' '/products/cutouts/kaiser-natron-pulver-250-g-gro%C3%9Fpackung-removebg-preview-2.png'
const imgBad = '/products/kaiser-natron-bad-500-g.jpg'
const image = computed(() => (reverse.value ? imgBad : imgPulver250))
const imageAlt = computed(() =>
reverse.value ? 'Kaiser-Natron Bad 500 g' : 'Kaiser-Natron Pulver 250 g Großpackung',
)
</script> </script>
<template> <template>
@@ -26,19 +32,27 @@ const imgPulver250 =
<Hero <Hero
:variant="variant" :variant="variant"
:tone="tone" :tone="tone"
:eyebrow="t('ds.hero.eyebrow')" :reverse="reverse"
:subheadline="t('ds.hero.sub')" :eyebrow="reverse ? t('home.banner.eyebrow') : t('ds.hero.eyebrow')"
:image="imgPulver250" :subheadline="reverse ? t('home.banner.sub') : t('ds.hero.sub')"
image-alt="Kaiser-Natron Pulver 250 g Großpackung" :image="image"
:badge="t('ds.badges.featured')" :image-alt="imageAlt"
:badge="reverse ? '' : t('ds.badges.featured')"
:cta-label="t('ds.buttons.addToCart')" :cta-label="t('ds.buttons.addToCart')"
:secondary-label="t('ds.buttons.learnMore')" :secondary-label="t('ds.buttons.learnMore')"
> >
<template #headline> <template #headline>
<template v-if="reverse">
{{ t('home.banner.headline.a') }}
<em class="italic font-light text-brand-soft">{{ t('home.banner.headline.em') }}</em>
{{ t('home.banner.headline.b') }}
</template>
<template v-else>
{{ t('ds.hero.headline.a') }} {{ t('ds.hero.headline.a') }}
<em class="italic font-light text-brand-soft">{{ t('ds.hero.headline.em') }}</em> <em class="italic font-light text-brand-soft">{{ t('ds.hero.headline.em') }}</em>
{{ t('ds.hero.headline.b') }} {{ t('ds.hero.headline.b') }}
</template> </template>
</template>
</Hero> </Hero>
</div> </div>
</template> </template>